internationalizationlocalenuxt3.jsnuxt-i18n

How can I use i18n strategy in nuxt3?


I use @nuxtjs/i18n with nuxt3 and I need to use strategy prefix_except_default. But it doesn't work.

My code:

package.json

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/i18n": "^8.0.0-beta.12",
    "@types/node": "^18",
    "nuxt": "^3.5.2"
  }
}

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n'
  ],
})

i18n.config.ts

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      welcome: 'Welcome'
    },
    ua: {
      welcome: 'Ласкаво просимо'
    }
  },
  strategy: 'prefix_except_default',
  defaultLocale: 'en'
}))

Problem

I need

http://localhost:3000/

http://localhost:3000/ua


Solution

  • Accordingly to the documentation, not all the configurations go in i18n.config, but only the ones related to vuei18n.

    The correct syntax is the following:

    export default defineNuxtConfig({
      modules: [
        '@nuxtjs/i18n'
      ],
      i18n: {
        strategy: 'prefix_except_default',
        locales: [
          'en',
          'ua'
         ],
        defaultLocale: 'en',
        vueI18n: './i18n.config.js'
      }
    })
    
    
    export default defineI18nConfig(() => ({
      legacy: false,
      locale: 'en',
      messages: {
        en: {
          welcome: 'Welcome'
        },
        ua: {
          welcome: 'Ласкаво просимо'
        }
      }
    }))
    

    See a working project here.

    On stackblitz the paths are not visible unless you manually input them, but if you reproduce the project locally it will work.