atinux / nuxt3

Nuxt 3 Module for vue-i18n-next

@intlify/nuxt3

Nuxt3 module for vue-i18n-next

❓ 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

# 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']
  // ...
}

🔧 Configurations

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}!'
    }
  }
})

📁 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:

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.

©️ LICENSE

MIT