Skip to content

intlify/vue-cli-plugin-i18n

Repository files navigation

🌏 vue-cli-plugin-i18n

npm npm Test vue-cli-plugin-i18n Dev Token

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