Nuxt3 module for vue-i18n-next
This nuxt module is intended to be a quick and easy way for people to use vue-i18n-next with Nuxt3.
It also has the purpose of finding issues on the vue-i18n-next so that @nuxtjs/i18n
can support Nuxt3.
- Setup
vue-i18n
for your Nuxt3 project- You do not need to entrypoint codes with
createI18n
.
- You do not need to entrypoint codes with
- Setup bundle tools
@intlify/vue-i18n-loader
and@intlify/vite-plugin-vue-i18n
are included
- Locale resources importing
First install
# for npm
npm install --save-dev @intlify/nuxt3
# for yarn
yarn add -D @intlify/nuxt3
After the installation in the previous section, you need to add @intlify/nuxt3
module to buildModules
options of nuxt.confg.[ts|js]
// nuxt.config.js
export default {
// ...
buildModules: ['@intlify/nuxt3']
// ...
}
You can set the following types in nuxt.config with below options:
export interface IntlifyModuleOptions {
/**
* Options specified for `createI18n` in vue-i18n.
*
* If you want to specify not only objects but also functions such as messages functions and modifiers for the option, specify the path where the option is defined.
* The path should be relative to the Nuxt project.
*/
vueI18n?: I18nOptions | string
/**
* Define the directory where your locale messages files will be placed.
*
* If you don't specify this option, default value is `locales`
*/
localeDir?: string
}
The above options can be specified in the intlify
config of nuxt.config
nuxt.config below:
export default {
// ...
buildModules: ['@intlify/nuxt3'],
// config for `@intlify/nuxt3`
intlify: {
vueI18n: {
// You can setting same `createI18n` options here !
locale: 'en',
messages: {
en: {
hello: 'Hello'
},
ja: {
hello: 'ใใใซใกใฏ'
}
}
}
}
}
If you specify the path to intlify.vueI18n
, you need to set it to a file in mjs
format.
The following nuxt.config:
export default {
// ...
buildModules: ['@intlify/nuxt3'],
// config for `@intlify/nuxt3`
intlify: {
vueI18n: 'vue-i18n.mjs'
}
}
vue-i18n.mjs
as follows:
// The configuration must be returned with an **async function**.
export default async () => ({
locale: 'en',
messages: {
en: {
hello: ({ named }) => `HELLO, ${named('name')}!`
},
ja: {
hello: 'ใใใซใกใฏใ{name}!'
}
}
})
You can load the locale resources stored in the file from the directory specified in intlify.localeDir
.
The following is an example of the nuxt.conf:
export default {
// ...
buildModules: ['@intlify/nuxt3'],
// config for `@intlify/nuxt3`
intlify: {
localeDir: 'locales', // set the `locales` directory at source directory of your Nuxt application
vueI18n: {
// ...
}
}
}
The following is a set of files of locale resources defined in the directory:
-| app/
---| nuxt.config.js
---| package.json
---| locales/
------| en.json/
------| ja.json/
The locale messages defined above will be loaded by the @intlify/nuxt3
module and set to the messages
option of createI18n
on the module side.
Each locale in the messages
option is used as a file name without its extension. For example, In the locales
directory above, en.json
will use en
as the locale.
MIT