Add support for i18n in your nuxt3 application

If you have already a nuxt3 project, then skip this section.

Installation

 npx nuxi init nuxt-i18n

Install dependencies with npm i.

Adding @intlify/nuxt3

Run below command to install @intlify/nuxt3 as dev dependency, then add @intlify/nuxt3 in modules section of nuxt.config.ts.

 npm install --save-dev @intlify/nuxt3

modules: ["@intlify/nuxt3"];

Now add the options for @intlify/nuxt3 below of modules, you can also provide vueI18n options as this package is built on top of vueI18n.

intlify: {
	localeDir: 'locales', // this the path for languages json files
	vueI18n: {
		// you can add vueI18n option here
	}
}

Create languages files

Create new directory inside your project’s root folder named locales, Note: this name should have to be same as provided in intlify:'locales'. Since this is the directory that this package will look for json files.

Inside those two json files add the languages key and value you want to change.

{
	"hello": "Hello {name}!",
    "language": "Language"
}

{
    "hello": "Bonjour, {name}!",
    "language": "Langue"
}

Ready to Test

There is global function that is provided by this package named $t(<key>,{<param>}).

<template>
    <div>
        <h1>{{ $t("hello", { name: "Fazail" }) }}</h1>
        <form>
            <label for="locale-select">{{ $t("language") }} </label>
            <select id="locale-select" v-model="$i18n.locale">
                <option value="en">en</option>
                <option value="fr">fr</option>
            </select>
        </form>
    </div>
</template>

In the above code "hello" is the key, and name is the parameter that will be replaced by the same keyword used inside "{keyword}" Check here more details. Notice we have binded the global $i18n.locale variable with v-model. So whenever we select a new value language will change. Note: select’s option value should be same name of the corresponding language file.