Nuxt.js i18n Not Serving Pages in Default Locale Without Redirecting

Question

I'm working on a Nuxt.js project with internationalization (i18n) implemented using the @nuxtjs/i18n module. I want to serve pages in French (default locale) directly without redirecting to /fr/... when no specific locale is provided in the URL (e.g., accessing /place should serve the page in French without redirecting to /fr/place). However, despite my configuration, the redirection still occurs.

Here's my nuxt.config.ts configuration:

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  // Other configurations...
  i18n: {
    detectBrowserLanguage: {
      useCookie: true,
      cookieCrossOrigin: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root'
    },
    strategy: 'prefix',
    locales: [
      { name: 'English', code: 'en', iso: 'en-US', dir: 'ltr', file: 'en.json' },
      { name: 'Français', code: 'fr', iso: 'fr-FR', dir: 'ltr', file: 'fr.json' },
      { name: 'العربية', code: 'ar', iso: 'ar-AR', dir: 'rtl', file: 'ar.json' },
    ],
    defaultLocale: 'fr',
    vueI18n: './i18n.config.ts'
  },
  // Other configurations...
});

I've tried clearing browser cookies, checking browser language settings, and verifying that there are no conflicting settings or middleware affecting the routing behavior, but the issue persists.

Any ideas on how to serve pages in the default locale directly without redirecting to the locale-prefixed URL?

Answer 1

You need to learn more about strategies. In your case, you should replace strategy: 'prefix' with strategy: 'prefix_and_default' meaning that:

... you will get URLs with prefixes for every language, but URLs for the default language will also have a non-prefixed version (though the prefixed version will be preferred when detectBrowserLanguage is enabled).