Vue CLI plugin to add vue-i18n to your Vue Project

by Vue.js Examples

vue-cli-plugin-i18n

Vue CLI plugin to add vue-i18n to your Vue Project

? Features

  • vue-i18n basic scaffolding
  • Locale messages in Single File components with vue-i18n-loader
  • Locale messages missing & unused reporting (experimental)
  • Env Variables

? Getting Started

If yon don't have a project created with Vue CLI:

vue create my-vue-app

Install the plugin into your project:

cd my-vue-app
vue add i18n

? Injected Commands

  • vue-cli-service i18n:report (experimental)

    Report the missing locale message keys and unused keys.

NOTE: limitation
vue-cli-service i18n:report cannot detect missing and unused keys from local messages of i18n custom blocks.

? Env variables

When vue-i18n code files had been scaffolded into your project, the following env variables generate into .env:

  • VUE_APP_I18N_LOCALE

    The locale of project localization, default en.

  • VUE_APP_I18N_FALLBACK_LOCALE

    The locale of project fallback localization, default en.

These env variables are read in src/i18n.(js|ts).

? Configurations

vue-cli-plugin-i18n have some plugin options in vue.config.js:

module.exports = {
  pluginOptions: {
    i18n: {
      locale: 'ja',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: false,
      enableLegacy: false
    }
  }
}

locale

  • Type: string

  • Default in prompt: en

    The locale of project localization.

fallbackLocale

  • Type: string

  • Default in prompt: en

    The fallback locale of project localization.

localeDir

  • Type: string

  • Default in prompt: locales

    The directory where store localization messages of project. The specified directory will start from the src directory.

enableInSFC

  • Type: boolean

  • Default in prompt: false

  • Support project Vue version: Vue 2 only

    Whether enable locale messages in Single file components. Default No in prompt, for Vue 2 and Vue I18n v8.x only.

enableLegacy

  • Type: boolean

  • Default in prompt: false

  • Support project Vue version: Vue 3 only

    Whether use legacy mode API in Vue I18n. Default No in prompt, for Vue 3 and Vue I18n v9 or later.

enableBridge

  • Type: boolean

  • Default in prompt: false

  • Support project Vue version: Vue 2 only

    Whether to set up a bridge to migrate to vue-i18n@v9.x from vue-i18n@v8.26, Default No in prompt.

    ⚠️ NOTE: If you use the Composition API with vue-i18n-bridge in bridge mode, you need to install @vue/composition-api.

includeLocales

  • Type: boolean

  • Default in prompt: false

  • Support project Vue version: Vue 2 only

    When enableBridge is true, i.e. in bridge mode, whether localization messages placed in localeDir option should be pre-compiled by message compiler or not.

    If you use Composition API in bridge mode, this option must be true because all localization messages are bundled during production build.

runtimeOnly

  • Type: boolean

  • Default(No Prompt): false

  • Support project Vue version: Vue 3 only

    Whether or not to use Vue I18n runtime-only, set in the vue-i18n field of webpack resolve.alias option. default Vue I18n (vue-i18n) package.json module field will be used.
    If true is specified, Vue I18n (vue-i18n) will use node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js.

    For more details, See here

compositionOnly

  • Type: boolean

  • Default(No Prompt): if enableLegacy set false, true else then false

  • Support project Vue version: Vue 3 only

    Whether to make vue-i18n's API only composition API. By default the legacy API is tree-shaken.

    For more details, See here

fullInstall

  • Type: boolean

  • Default(No Prompt): true

  • Support project Vue version: Vue 3 only

    Whether to install the full set of APIs, components, etc. provided by Vue I18n. By default, all of them will be installed.

    If false is specified, build-in components and directive will not be installed in vue and will be tree-shaken.

    For more details, See here

? Changelog

Details changes for each release are documented in the CHANGELOG.md.

❗ Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

✅ TODO

Managed with GitHub Projects

? Contribution

Please make sure to read the Contributing Guide before making a pull request.

©️ License

MIT