typescriptnuxt.jsnuxt-i18n

@nuxt/i18n installation/configuration issue


I tried to install @nuxt/i18n on my project but it doesn't work. I executed the command npm install @nuxtjs/i18n without problems. Then I added some lines of code in my nuxt.config.ts file:

['@nuxtjs/i18n', {
    locales: [
        {
            code: 'it',
            iso: 'it-IT',
            file: 'it-IT.js'
        }
    ],
    defaultLocale: 'it'
}]

And in tsconfig.json I added this:

"compilerOptions": {
    "types": [
        "@nuxt/types",
        "@nuxtjs/i18n",
    ]
}

Now, when I build the solution, I obtain this error:

Cannot start nuxt:  Cannot read properties of undefined (reading 'options')
at _default (____________/node_modules/@nuxtjs/i18n/src/index.js:13:92)
at installModule (____________/node_modules/@nuxt/kit/dist/index.mjs:416:9)
at async initNuxt (____________/node_modules/nuxt/dist/index.mjs:1823:7)
at async load (____________/node_modules/nuxt/node_modules/nuxi/dist/chunks/dev.mjs:6779:9)
at async Object.invoke (____________/node_modules/nuxt/node_modules/nuxi/dist/chunks/dev.mjs:6840:5)
at async _main (____________/node_modules/nuxt/node_modules/nuxi/dist/cli.mjs:50:20)

I followed the guide at this link: https://i18n.nuxtjs.org/setup

Problem persist also without locales and defaultLocale. What's wrong with my configuration? What is missing?


Solution

  • you need to add i18n configuration to your plugin folder (/plugins/i18n.ts).

    Here is one example of plugin configuration

    import { createI18n } from 'vue-i18n'
    
    export default defineNuxtPlugin(({ vueApp }) => {
        const i18n = createI18n({
            legacy: false,
            globalInjection: true,
            locale: 'it',
            messages: {
                en: {
                    test: 'Hello, {name}!'
                },
                it: {
                    test: 'Ciao, {name}!'
                }
            }
        })
    
        vueApp.use(i18n)
    })
    

    your nuxt.config.ts file should look like this:

    modules: [
            ...
            '@nuxtjs/i18n',
            ...
    ],
    

    to use your labels in template you can use the following syntax:

    <h1>{{ $t('test', { name: 'vue-i18n' }) }}</h1>
    

    if you need more details you chan check this articl.