https://github.com/intlify/nuxt3
Nuxt 3 Module for vue-i18n-next
https://github.com/intlify/nuxt3
Last synced: about 1 year ago
JSON representation
Nuxt 3 Module for vue-i18n-next
- Host: GitHub
- URL: https://github.com/intlify/nuxt3
- Owner: intlify
- License: mit
- Created: 2021-09-11T16:38:50.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-23T14:10:22.000Z (over 3 years ago)
- Last Synced: 2025-03-29T15:04:33.019Z (about 1 year ago)
- Language: TypeScript
- Size: 1.36 MB
- Stars: 202
- Watchers: 4
- Forks: 18
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @intlify/nuxt3
Nuxt3 module for vue-i18n-next
## ** ⚠️ IMPORTANT**
**This project is maintenance mode, because I'm forcusing [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/). We would recommend to use it**
## ❓ What is defference from `@nuxtjs/i18n` ?
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`.
- Setup bundle tools
- `@intlify/vue-i18n-loader` and `@intlify/vite-plugin-vue-i18n` are included
- Locale resources importing
## 💿 Installation
First install
```sh
# 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 `modules` options of `nuxt.confg.[ts|js]`
```js
// nuxt.config.js
export default {
// ...
modules: ['@intlify/nuxt3']
// ...
}
```
## 🔧 Configurations
You can set the following types in nuxt.config with below options:
```ts
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:
```js
export default {
// ...
modules: ['@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`:
```js
export default {
// ...
modules: ['@intlify/nuxt3'],
// config for `@intlify/nuxt3`
intlify: {
vueI18n: 'vue-i18n.mjs'
}
}
```
`vue-i18n.mjs` as follows:
```js
// The configuration must be returned with an **async function**.
export default async () => ({
locale: 'en',
messages: {
en: {
hello: ({ named }) => `HELLO, ${named('name')}!`
},
ja: {
hello: 'こんにちは、{name}!'
}
}
})
```
## 📁 Locale resources importing
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:
```js
export default {
// ...
modules: ['@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:
```sh
-| 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.
## ©️ LICENSE
MIT