How can I generate localized dynamic routes for slugs in Nuxt3 i18n?

Below is one approach that works around the fact that Nuxt i18n’s composables don’t “translate” dynamic routes defined by a single file (e.g. pages/slug.vue) using the pages configuration. In other words, if you use a dynamic page you can’t directly call something like

  useLocaleRoute('imprint', 'de')

to get the proper localized path because your dynamic route never gets a “named” route from the pages config. (That’s why you see localeRoute('dataprivacy') work correctly for yesterday.vue but not for the dynamic slug.)

One recommended solution is to maintain an explicit mapping for your “static” custom slugs. That way you can write a helper function that returns the localized slug you expect. For example, you might do the following:

---

File: /composables/localizedRoutes.js

JSCopied
// This helper uses a local mapping – ideally you’d share this config with nuxt.config!
const customPages = {
  imprint: {
    en: '/imprint',
    de: '/impressum'
  },
  dataprivacy: {
    en: '/dataprivacy',
    de: '/datenschutz'
  },
  yesterday: {
    en: '/yesterday',
    de: '/gestern'
  }
};

export function myDummyRouteFunction(pageKey, locale) {
  // Return the localized path if defined
  const routesForPage = customPages[pageKey];
  if (!routesForPage) {
    console.warn(`No custom route defined for key "${pageKey}".`);
    return undefined;
  }
  // Note: If you use a strategy like 'prefix_except_default', remember that non-default locales should have a prefix.
  // For example, if locale is not the default (say, 'de'), you might need to add '/{locale}'.
  // This example assumes your mapping objects already include any prefix needed.
  return routesForPage[locale] || undefined;
}

---

Now in your component you can call:

---

VUECopied
<script setup>
import { myDummyRouteFunction } from '~/composables/localizedRoutes.js'

console.log(myDummyRouteFunction('imprint', 'de')) // should log: '/impressum'
console.log(myDummyRouteFunction('imprint', 'en')) // should log: '/imprint' or '/en/imprint' if you decide
</script>

---

Notes

1. Using Your Nuxt Config:
   While you’re currently defining your custom pages in your nuxt.config, the runtime isn’t automatically “injecting” that configuration into your composables. One way to avoid duplication is to export the same mapping from your nuxt config into a file you can import; for example, by having a separate module (e.g. routes.config.js) that you both import in nuxt.config and in your composable.

2. Handling the Locale Prefix:
   In your example you want the English (non-default) path to be prefixed (e.g. /en/imprint), but for the default locale you want just the path (e.g. /impressum). In the helper above the mapping values are defined manually. If you want Nuxt to prepend the locale automatically you can adjust the helper. For instance, if your default locale is 'de', you could do something like this:

   JSCopied
   export function myDummyRouteFunction(pageKey, locale) {
     const routesForPage = customPages[pageKey];
     if (!routesForPage) return
     let path = routesForPage[locale];
     // Assuming 'de' is default, if not default, ensure the locale prefix is active.
     if (locale !== 'de' && !path.startsWith(`/${locale}`)) {
       // Prepend the locale if not already present.
       path = `/${locale}${path}`;
     }
     return path;
   }

3. Why This Is Needed:
   The built‐in composables like useLocaleRoute are primarily built to work with traditional static pages (with corresponding vue files and generated route names). In your case, because you are using one dynamic file (pages/slug.vue) to handle multiple “virtual” pages, the pages config isn’t automatically “attached” to a dynamic route name. Therefore, a custom helper is necessary.

Summary

To answer your question:
Define (or export) an object that maps your keys to the localized routes and then write a helper function that, given a page key and a locale, returns the corresponding path. This meets your requirement:

  myDummyRouteFunction('imprint', 'de') → '/impressum'
  myDummyRouteFunction('imprint', 'en') → '/en/imprint' (if you choose to add the prefix manually)

This custom approach avoids the limitations of using useLocaleRoute on a dynamic slug page while still centralizing your route definitions.