@nuxt/i18n installation/configuration issue-CodePudding

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?

CodePudding user response：

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.