useRewriteURL Composable

The useRewriteURL composable for Vue 3 is designed to handle localised URL rewrites on the client-side. It automatically corrects the browser's URL to its "pretty" localised version based on the user's current locale and the configuration in intlayer.config.ts.

It does this by using window.history.replaceState, which avoids triggering unwanted Vue Router navigations.

Usage

Call the composable within your setup() function or <script setup>.

<script setup>
import { useRewriteURL } from "vue-intlayer";

// Automatically correct /fr/tests to /fr/essais in the address bar when a rewrite rule exists
useRewriteURL();
</script>

<template>
  <router-view />
</template>

How it works

1. Reactive Monitoring: The composable sets up a watch on the user's locale.
2. Rewrite Matching: Whenever the locale changes (or on mount), it checks whether the current window.location.pathname matches a canonical route that has a prettier, localized alias.
3. URL Correction: If a prettier alias is found, the composable calls window.history.replaceState to update the address bar without reloading the page or losing router state.

Why use it?

• SEO optimisation: Ensures search engines index the authoritative localized version of your URLs.
• Improved UX: Corrects manually entered URLs to reflect your preferred naming (e.g., /fr/a-propos instead of /fr/about).
• Low Overhead: Silently updates the URL without re-triggering component lifecycles or navigation guards.