Custom paths with locale in Nuxt 3 with router.options.ts?

[kliehm]

I'm using "nuxt": "^3.0.0" with "@nuxtjs/i18n-edge": "8.0.0-beta.4-27812700.b832f07" (because of #1640).

My problem is that I'd like to call a URL with the structure /foo/EN/about, which works fine, but the content from $t('bla') is always the default language (DE) instead of EN. There's also a console warning [Vue Router warn]: No match found for location with path "/DE/EN/about". So it appears the prefix is added to my path although there is already a locale in it, which is not read. I suppose I'm doing something wrong, but can't figure out what the proper way would be. strategy: 'no_prefix' was not a strategy either.

My custom routes file at app/router.options.ts looks like this:

import type { RouterConfig } from '@nuxt/schema';
import About from '@/pages/about/about.vue';
import Home from '@/pages/home/home.vue';

export const locale = ':lang';

// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterConfig>{
  routes: () => [
    {
      name: 'home',
      path: `/${locale}/`,
      component: Home,
    },
    {
      name: 'about',
      path: `/${locale}/about`,
      component: About,
    },
  ],
};

This is the relevant i18n part in nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  app: {
    baseURL: '/foo/',
  },
  srcDir: 'src/',
  modules: [
    [
      '@nuxtjs/i18n-edge',
      {
        defaultLocale: 'DE',
        detectBrowserLanguage: false,
        langDir: 'data/i18n/',
        locales: [
          {
            code: 'DE',
            file: 'de-DE.json',
            iso: 'de-DE',
          },
          {
            code: 'EN',
            file: 'en-GB.json',
            iso: 'en-GB'
          },
        ],
        parsePages: false,
        strategy: 'prefix',
        vueI18n: {
          legacy: false,
          locale: 'DE',
        },
        vueI18nLoader: true,
      },
    ],
  ],
)};

[ineshbose]

I'm able to replicate your issue and putting it here for reference: https://stackblitz.com/edit/github-ktnn3i?file=src/pages/about/about.vue

I have also been facing the Vue Router warning, and it is related to #1602.

[kliehm]

Thank you for creating the example. Yes, when you call /foo/, it returns a 404 and doesn't insert the locale in the URL, because the path '/' was not defined in the example. I added it above. Also the translation files can't be loaded, which results in the console warnings could not find EN locale in localeMessages.

And when you call /foo/about it redirects to /foo/DE/about, the translation files are loaded, but there's the Vue warning for the missing match, the double locale in the internal path and the fallback to the default locale text because the locale is not retrieved from the URL path.

Vite 3 and Nuxt 3 are brand new, but I guess other people have worked with the app/router.options.ts custom routes configuration in versions 2. How did they solve the incompatibility? How can I avoid adding a redundant pages object in the Nuxt configuration and make the i18n module acknowledge the routes already defined in the other file?