@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.11

package/docs/en/packages/vite-intlayer/intlayerCompiler.md

@@ -0,0 +1,120 @@
+---
+createdAt: 2026-06-25
+updatedAt: 2026-06-25
+title: intlayerCompiler Vite Plugin Documentation | vite-intlayer
+description: Vite plugin that extracts inline Intlayer content declarations from component files and writes them to dictionary JSON files at build/transform time.
+keywords:
+  - intlayerCompiler
+  - vite
+  - plugin
+  - compiler
+  - content
+  - dictionary
+  - internationalization
+  - i18n
+slugs:
+  - doc
+  - packages
+  - vite-intlayer
+  - intlayerCompiler
+history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Bundled into intlayer(); init doc"
+author: aymericzip
+---
+
+# intlayerCompiler
+
+`intlayerCompiler` is a Vite plugin that scans component source files for **inline Intlayer content declarations** — content defined directly inside a component rather than in a separate `.content.ts` file — and writes them to dictionary JSON files during the transform phase.
+
+> **Since Intlayer v9** `intlayerCompiler` is automatically included inside the main [`intlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/vite-intlayer/intlayer.md) plugin when both `compiler.enabled` is `true` and `compiler.output` is set in your Intlayer config. You only need to register it separately when you want full control over compiler-specific configuration.
+
+## Usage
+
+### As part of `intlayer()` (recommended, v9+)
+
+Enable the compiler through your Intlayer config:
+
+```ts
+// intlayer.config.ts
+import { defineConfig } from "intlayer";
+
+export default defineConfig({
+  compiler: {
+    enabled: true,
+    output: "./src/dictionaries", // where extracted dictionaries are written
+  },
+});
+```
+
+Then use the standard plugin with no extra registration:
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+### Standalone (when needed)
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import { intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [intlayerCompiler()],
+});
+```
+
+## Options
+
+```ts
+import type { IntlayerCompilerOptions } from "vite-intlayer";
+```
+
+| Option           | Type                      | Description                                                                                 |
+| ---------------- | ------------------------- | ------------------------------------------------------------------------------------------- |
+| `configOptions`  | `GetConfigurationOptions` | Intlayer configuration overrides forwarded to `getConfiguration()`.                         |
+| `compilerConfig` | `Partial<CompilerConfig>` | Overrides for the compiler-specific config section (e.g. `enabled`, `output`, `filesList`). |
+
+### Example
+
+```ts
+intlayerCompiler({
+  configOptions: { configFile: "./config/intlayer.config.ts" },
+  compilerConfig: { enabled: true, output: "./src/dictionaries" },
+});
+```
+
+## How it works
+
+### Transform phase
+
+For every source file that matches `compiler.filesList`, the compiler plugin:
+
+1. Passes the file content through `extractContent` from `@intlayer/babel`.
+2. Calls `onExtract` for each declaration found, which writes the resulting dictionary JSON to `compiler.output`.
+3. Returns the transformed source code with inline declarations replaced by standard `useIntlayer('key')` / `getIntlayer('key')` calls.
+
+Supported file types: `.ts`, `.tsx`, `.js`, `.jsx`, `.vue`, `.svelte`, `.astro`.
+
+### HMR (Hot Module Replacement)
+
+When a component file is saved in development mode, the compiler:
+
+1. Detects the file change via Vite's `handleHotUpdate` hook.
+2. Re-extracts content from the updated file.
+3. Writes the updated dictionary JSON.
+4. Triggers a full page reload (`server.ws.send({ type: 'full-reload' })`).
+
+A 500 ms debounce prevents the dictionary write itself (which also triggers a file-change event) from causing an infinite re-extraction loop.
+
+### Deduplication
+
+`intlayerCompiler` uses the same `createPrimaryInstanceGuard` deduplication mechanism as the other bundled plugins. When both `intlayer()` (which bundles the compiler) and a manual `intlayerCompiler()` call are present, only the first registered instance runs — no dictionaries are written twice.

package/docs/en/packages/vite-intlayer/intlayerMinify.md

@@ -0,0 +1,92 @@
+---
+createdAt: 2026-06-25
+updatedAt: 2026-06-25
+title: intlayerMinify Vite Plugin Documentation | vite-intlayer
+description: Vite plugin that minifies compiled Intlayer dictionary JSON files and optionally mangles content field names to reduce bundle size.
+keywords:
+  - intlayerMinify
+  - vite
+  - plugin
+  - minify
+  - bundle size
+  - dictionary
+  - internationalization
+  - i18n
+slugs:
+  - doc
+  - packages
+  - vite-intlayer
+  - intlayerMinify
+history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Init doc"
+author: aymericzip
+---
+
+# intlayerMinify
+
+`intlayerMinify` is a Vite plugin that minifies compiled dictionary JSON files during a production build. It strips all unnecessary whitespace and, when combined with `intlayerPrune`, optionally renames content field names to short alphabetic aliases (`a`, `b`, `c`, …) to further reduce bundle size.
+
+> The plugin is already included and configured automatically when you use [`intlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/vite-intlayer/intlayer.md). You only need to register it manually if you are composing the plugin stack yourself.
+
+## Usage
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import { intlayerMinify, intlayerPrune } from "vite-intlayer";
+import { createPruneContext } from "@intlayer/babel";
+
+const pruneContext = createPruneContext();
+
+export default defineConfig({
+  plugins: [
+    intlayerPrune(intlayerConfig, pruneContext),
+    intlayerMinify(intlayerConfig, pruneContext),
+  ],
+});
+```
+
+## Activation conditions
+
+`intlayerMinify` is active **only** when all three of the following are true:
+
+1. The Vite command is `build` (not `serve` / dev).
+2. `build.optimize` is `true` (or `undefined`, which defaults to `true` for builds).
+3. `build.minify` is `true` in your Intlayer config.
+
+It is automatically **disabled** when `editor.enabled` is `true` because the editor needs the full, human-readable dictionary content.
+
+## What gets minified
+
+The plugin targets two dictionary locations (as resolved from `intlayer.system`):
+
+- `dictionariesDir` — static all-locale dictionaries (e.g. `.intlayer/dictionaries/*.json`)
+- `dynamicDictionariesDir` — per-locale dynamic dictionaries
+
+> Fetch-mode dictionaries (`fetchDictionariesDir`) are **never** minified because they are served from a remote API at runtime using their original field names. Renaming fields would create a mismatch between the server response and client-side property accesses.
+
+## Field-name mangling (property minification)
+
+When `intlayerPrune` has analysed the codebase and populated `pruneContext.dictionaryKeyToFieldRenameMap`, `intlayerMinify` also renames content field names to short aliases. For example:
+
+```json
+// before
+{ "key": "myDict", "content": { "title": "Hello", "description": "World" } }
+
+// after (with mangling)
+{ "key": "myDict", "content": { "a": "Hello", "b": "World" } }
+```
+
+The corresponding source-file property accesses are renamed by the Babel pass inside `intlayerOptimize`, so runtime behaviour is unchanged.
+
+Internal Intlayer fields (`nodeType`, `translation`, etc.) are never renamed.
+
+## Edge-case dictionaries
+
+Dictionaries flagged in `pruneContext.dictionariesWithEdgeCases` (structural anomalies detected during the prune phase) are skipped entirely — neither minified nor mangled — to avoid shipping broken data.
+
+## Qualified groups (collections / variants / meta records)
+
+For dictionaries with a `qualifierTypes` array (collections, variants, and meta records), the plugin preserves the `qualifierTypes` array and the `meta` side-map verbatim. Only the `content` entries have their field names mangled. The composite keys (used for selector matching at runtime) are never touched.

package/docs/en/packages/vite-intlayer/intlayerProxy.md

@@ -0,0 +1,172 @@
+---
+createdAt: 2026-06-25
+updatedAt: 2026-06-25
+title: intlayerProxy Vite Plugin Documentation | vite-intlayer
+description: Locale-routing middleware for Vite dev/preview servers and production SSR. Handles locale detection, URL redirects, and internal rewrites.
+keywords:
+  - intlayerProxy
+  - vite
+  - plugin
+  - middleware
+  - locale
+  - routing
+  - internationalization
+  - i18n
+  - SSR
+slugs:
+  - doc
+  - packages
+  - vite-intlayer
+  - intlayerProxy
+history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Merged configOptions into single options object; proxy bundled into intlayer()"
+author: aymericzip
+---
+
+# intlayerProxy
+
+`intlayerProxy` is a Vite plugin that registers locale-routing middleware for **every environment**: dev server, preview server, and production SSR (Nitro / TanStack Start).
+
+> **Since Intlayer v9** `intlayerProxy` is automatically included inside the main [`intlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/vite-intlayer/intlayer.md) plugin and enabled by default via `routing.enableProxy: true`. You only need to register it separately if you need lower-level control or are using it outside the standard `intlayer()` setup.
+
+## Usage
+
+### As part of `intlayer()` (recommended, v9+)
+
+Pass `proxy` options to the main plugin instead of registering `intlayerProxy` separately:
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
+  ],
+});
+```
+
+### Standalone (when needed)
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+## Options
+
+```ts
+import type { IntlayerProxyPluginOptions } from "vite-intlayer";
+```
+
+All options are optional and passed as a single object:
+
+| Option          | Type                                | Description                                                                                                                                        |
+| --------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ignore`        | `(req: IncomingMessage) => boolean` | Predicate that excludes requests from locale routing. Return `true` to skip a request (e.g. API routes, health checks).                            |
+| `configOptions` | `GetConfigurationOptions`           | Intlayer configuration overrides forwarded to `getConfiguration()`. Use when you need the proxy to read a specific config file or override values. |
+
+### Example
+
+```ts
+intlayerProxy({
+  ignore: (req) => req.url?.startsWith("/api"),
+  configOptions: { configFile: "./config/intlayer.config.ts" },
+});
+```
+
+## createIntlayerProxyHandler
+
+`createIntlayerProxyHandler` creates a standalone, framework-agnostic Node.js `(req, res, next)` middleware that contains all the locale-routing logic. It is useful in environments where the Vite plugin API is unavailable (e.g. a plain Node.js server or a custom Nitro module).
+
+```ts
+import { createIntlayerProxyHandler } from "vite-intlayer";
+
+const handler = createIntlayerProxyHandler({
+  ignore: (req) => req.url?.startsWith("/api"),
+  configOptions: { configFile: "./config/intlayer.config.ts" },
+});
+
+// Express / Connect
+app.use(handler);
+```
+
+### Production SSR (TanStack Start / Nitro via h3)
+
+```ts
+// server/middleware/intlayerProxy.ts
+import { fromNodeMiddleware } from "h3";
+import { createIntlayerProxyHandler } from "vite-intlayer";
+
+export default fromNodeMiddleware(
+  createIntlayerProxyHandler({
+    ignore: (req) => req.url?.startsWith("/api"),
+  })
+);
+```
+
+## Routing behaviour
+
+The middleware mirrors the routing logic from `next-intlayer` middleware and supports all Intlayer routing modes.
+
+### Routing modes
+
+| Mode            | URL visible in browser   | Behaviour                                                                                               |
+| --------------- | ------------------------ | ------------------------------------------------------------------------------------------------------- |
+| `prefix`        | `/en/about`              | Default. Locale prefix in the URL. Default locale redirects to the un-prefixed URL unless `prefix-all`. |
+| `prefix-all`    | `/en/about`, `/fr/about` | All locales — including default — are always prefixed.                                                  |
+| `no-prefix`     | `/about`                 | No locale in the URL. Locale is stored in cookies only; URL rewrites happen internally.                 |
+| `search-params` | `/about?locale=en`       | Locale passed as a query parameter. Redirects to add/update the `locale` param when missing or stale.   |
+
+### Detection priority
+
+1. URL path prefix (e.g. `/fr/about` → `fr`).
+2. Cookie / localStorage value (`intlayer-locale`).
+3. `Accept-Language` header.
+4. `defaultLocale` from config.
+
+### Automatic bypass
+
+The middleware always passes these requests straight through without locale handling:
+
+- Requests matching the `ignore` predicate.
+- `/node_modules/**`
+- `/@**` – Vite internals (`@vite/`, `@fs/`, `@id/`, etc.).
+- `/_**` – server internals (`__vite_ping`, `__manifest`, etc.).
+- Requests whose path ends with a file extension (static assets). If a locale prefix is present on a static asset path (e.g. `/fr/logo.png`), it is stripped so the file can be served correctly.
+
+### Domain routing
+
+When `routing.domains` is configured in your Intlayer config, the middleware handles cross-domain locale routing:
+
+- A request for `/zh/about` on `intlayer.org` is redirected to `https://intlayer.zh/about` when `domains.zh = "intlayer.zh"`.
+- A request to `intlayer.zh/about` is rewritten internally to `/zh/about` so the `[locale]` route parameter is populated.
+
+### Redirect loop protection
+
+The middleware tracks redirect counts per `originalUrl → newUrl` pair within a 2-second sliding window. More than 10 redirects within that window returns a `500` response with a descriptive error instead of looping forever.
+
+## Nitro / production SSR (automatic injection, v9+)
+
+When `intlayerProxy` is used as a Vite plugin, it carries a `.nitro` property. The `nitro/vite` build plugin reads this property and pushes it into `nitroConfig.modules`, so `intlayerNitroHandler` is registered as a Nitro server middleware automatically — no manual configuration is needed for production SSR.
+
+The Nitro handler uses h3 v2's Web Fetch API event model (not `fromNodeMiddleware`) so it is compatible with all Nitro presets: Node, Bun, Deno, edge runtimes.
+
+## Deprecated aliases
+
+| Deprecated export          | Replacement     |
+| -------------------------- | --------------- |
+| `intlayerMiddleware`       | `intlayerProxy` |
+| `intLayerMiddlewarePlugin` | `intlayerProxy` |

package/docs/en/packages/vite-intlayer/intlayerPrune.md

@@ -1,45 +1,123 @@
 ---
 createdAt: 2026-01-21
-updatedAt: 2026-01-21
+updatedAt: 2026-06-25
 title: intlayerPrune Vite Plugin Documentation | vite-intlayer
-description: See how to use the intlayerPrune plugin for vite-intlayer package
+description: Vite plugin that tree-shakes unused dictionary fields from the production bundle to reduce bundle size.
 keywords:
   - intlayerPrune
   - vite
   - plugin
   - tree-shaking
-  - Intlayer
-  - intlayer
-  - Internationalization
-  - Documentation
+  - bundle size
+  - dictionary
+  - internationalization
+  - i18n
 slugs:
   - doc
   - packages
   - vite-intlayer
   - intlayerPrune
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Expanded with field-level pruning, pruneContext, and edge-case details"
   - version: 8.0.0
     date: 2026-01-21
     changes: "Init doc"
 author: aymericzip
 ---
 
-# intlayerPrune Vite Plugin Documentation
+# intlayerPrune
 
-The `intlayerPrune` Vite plugin is used to tree-shake and prune unused dictionaries from your application bundle. This helps reduce the final bundle size by only including the necessary multilingual content.
+`intlayerPrune` is a Vite plugin that removes unused content fields from compiled dictionary JSON files during a production build. Instead of shipping every field from every dictionary, only the fields that are actually accessed in your source code are included in the bundle.
+
+> The plugin is already included and configured automatically when you use [`intlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/vite-intlayer/intlayer.md). You only need to register it manually if you are composing the plugin stack yourself.
 
 ## Usage
 
+### As part of `intlayer()` (recommended)
+
+Enable pruning through your Intlayer config and the main plugin handles everything:
+
+```ts
+// intlayer.config.ts
+import { defineConfig } from "intlayer";
+
+export default defineConfig({
+  build: {
+    optimize: true, // enables both prune and minify
+  },
+});
+```
+
 ```ts
 // vite.config.ts
 import { defineConfig } from "vite";
-import { intlayer, intlayerPrune } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
-  plugins: [intlayer(), intlayerPrune()],
+  plugins: [intlayer()],
 });
 ```
 
-## Description
+### Standalone
+
+If you are composing the plugin stack manually, `intlayerPrune` and `intlayerMinify` share a `PruneContext` object that must be created once and passed to both:
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import { intlayerPrune, intlayerMinify } from "vite-intlayer";
+import { createPruneContext } from "@intlayer/babel";
+import { getConfiguration } from "@intlayer/config/node";
+
+const intlayerConfig = getConfiguration();
+const pruneContext = createPruneContext();
+
+export default defineConfig({
+  plugins: [
+    intlayerPrune(intlayerConfig, pruneContext),
+    intlayerMinify(intlayerConfig, pruneContext), // optional, reads from same context
+  ],
+});
+```
+
+## How it works
+
+### 1. Usage analysis (buildStart)
+
+During `buildStart`, the `intlayerOptimize` plugin (also part of `intlayer()`) scans every component source file listed in `build.filesList`. For each `useIntlayer('key')` or `getIntlayer('key')` call, it records exactly which fields are accessed, e.g.:
+
+```ts
+const { title, description } = useIntlayer("myDict");
+// records: myDict → { title, description }
+```
+
+This builds `pruneContext.fieldUsageMap` before any `transform` calls run.
+
+### 2. JSON pruning (transform, enforce: 'pre')
+
+When Vite processes a compiled dictionary JSON file, `intlayerPrune` intercepts it before Vite's built-in JSON → ESM conversion. It reads the field-usage map from `pruneContext` and removes any content field that is not in the recorded usage set.
+
+Two content shapes are supported:
+
+- **Static dictionaries** — `{ nodeType: "translation", translation: { en: {...}, fr: {...} } }`. Fields are pruned per-locale inside `translation`.
+- **Dynamic (per-locale) dictionaries** — flat `{ fieldA: ..., fieldB: ... }`. Fields are pruned at the top level.
+
+### 3. Edge cases
+
+If a dictionary's content structure cannot be recognised (e.g. an unusual nested shape), it is added to `pruneContext.dictionariesWithEdgeCases` and **left untouched**. A warning is logged. `intlayerMinify` also skips these dictionaries.
+
+### 4. Field-rename map
+
+When pruning succeeds, `intlayerPrune` also writes `pruneContext.dictionaryKeyToFieldRenameMap` — a mapping from original field names to short aliases. `intlayerMinify` reads this map to rename fields in the output JSON, and `intlayerOptimize`'s Babel rename pass updates property accesses in source files accordingly.
+
+## Activation conditions
+
+`intlayerPrune` is active **only** when all of the following are true:
+
+1. The Vite command is `build`.
+2. `build.optimize` is `true` (or `undefined`, which defaults to `true` for builds).
+3. `build.purge` is `true` in your Intlayer config.
 
-The plugin analyzes your source code to identify which dictionary keys are actually used. It then removes any unused content from the bundled dictionary files. This is particularly useful for large projects with many dictionaries where only a subset is used in specific pages or components.
+It is automatically **disabled** when `editor.enabled` is `true` because the editor needs the full dictionary content.

package/docs/en/packages/vue-intlayer/exports.md

@@ -14,6 +14,9 @@ slugs:
   - vue-intlayer
   - exports
 history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Add usePathname utility"
   - version: 8.0.0
     date: 2026-01-21
     changes: "Unified documentation for all exports"
@@ -59,6 +62,7 @@ import "vue-intlayer";
 | `useDictionaryAsync`   | Same as `useDictionary`, but handles asynchronous dictionaries.                                                   | -                                                                                                                     |
 | `useDictionaryDynamic` | Same as `useDictionary`, but handles dynamic dictionaries.                                                        | -                                                                                                                     |
 | `useLocale`            | Returns the current locale and a function to set it.                                                              | -                                                                                                                     |
+| `usePathname`          | Returns the current pathname as a `ComputedRef<string>` with the locale segment removed. Reactive to `popstate`.  | [usePathname](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/vue-intlayer/usePathname.md)     |
 | `useRewriteURL`        | Client-side composable to manage URL rewrites. Automatically updates the URL if a localized rewrite rule exists.  | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/vue-intlayer/useRewriteURL.md) |
 | `useIntl`              | Returns the Intl object for the current locale.                                                                   | -                                                                                                                     |
 | `useLoadDynamic`       | Composable to load dynamic dictionaries.                                                                          | -                                                                                                                     |

package/docs/en/packages/vue-intlayer/usePathname.md

@@ -0,0 +1,109 @@
+---
+createdAt: 2026-06-22
+updatedAt: 2026-06-22
+title: usePathname Composable Documentation | vue-intlayer
+description: See how to use the usePathname composable for vue-intlayer package
+keywords:
+  - usePathname
+  - pathname
+  - locale
+  - Intlayer
+  - Internationalization
+  - Documentation
+  - Vue
+  - JavaScript
+slugs:
+  - doc
+  - packages
+  - vue-intlayer
+  - usePathname
+history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Add usePathname utility"
+  - version: 8.2.0
+    date: 2026-06-22
+    changes: "Init history"
+author: aymericzip
+---
+
+# Vue Integration: `usePathname` Composable Documentation
+
+The `usePathname` composable returns the current browser pathname with the locale segment stripped, as a reactive `ComputedRef<string>`. It is useful for building locale-aware navigation — for example, determining which nav item is active — without having to manually remove the locale prefix.
+
+## Importing `usePathname` in Vue
+
+```typescript
+import { usePathname } from "vue-intlayer";
+```
+
+## Overview
+
+`usePathname` reads `window.location.pathname`, strips the locale prefix via `getPathWithoutLocale`, and updates automatically when the browser fires a `popstate` event (back/forward navigation). The result is exposed as a `ComputedRef<string>` so it integrates naturally with Vue's reactivity system.
+
+## Usage
+
+```vue fileName="src/components/NavItem.vue"
+<script setup lang="ts">
+import { usePathname } from "vue-intlayer";
+
+const props = defineProps<{
+  href: string;
+  label: string;
+}>();
+
+const pathname = usePathname();
+</script>
+
+<template>
+  <a :href="href" :aria-current="pathname === href ? 'page' : undefined">
+    {{ label }}
+  </a>
+</template>
+```
+
+## Return Value
+
+| Type                  | Description                                                                      |
+| --------------------- | -------------------------------------------------------------------------------- |
+| `ComputedRef<string>` | Reactive computed ref containing the current pathname without the locale prefix. |
+
+## Behavior
+
+- **Locale stripping**: Removes the leading locale segment (e.g. `/fr/dashboard` → `/dashboard`).
+- **Reactive**: Updates automatically on `popstate` events (browser back / forward navigation).
+- **SSR-safe**: Returns `""` when `window` is not available.
+- **Cleanup**: The `popstate` listener is removed automatically when the component is unmounted (`onUnmounted`).
+
+## Example
+
+```vue fileName="src/components/Sidebar.vue"
+<script setup lang="ts">
+import { usePathname } from "vue-intlayer";
+
+const links = [
+  { href: "/dashboard", label: "Dashboard" },
+  { href: "/settings", label: "Settings" },
+];
+
+const pathname = usePathname();
+</script>
+
+<template>
+  <nav>
+    <a
+      v-for="link in links"
+      :key="link.href"
+      :href="link.href"
+      :style="{ fontWeight: pathname === link.href ? 'bold' : 'normal' }"
+    >
+      {{ link.label }}
+    </a>
+  </nav>
+</template>
+```
+
+## Related
+
+- [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/vue-intlayer/exports.md) — current locale + locale switcher
+- [`getPathWithoutLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getPathWithoutLocale.md) — the underlying utility used by this composable