• Stars
    star
    197
  • Rank 197,722 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

🌏 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 [email protected] from [email protected], 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

More Repositories

1

vue-i18n-next

Vue I18n for Vue 3
TypeScript
1,904
star
2

vue-i18n-loader

🌐 vue-i18n loader for custom blocks
TypeScript
268
star
3

bundle-tools

bundling for intlify i18n tools
TypeScript
226
star
4

nuxt3

Nuxt 3 Module for vue-i18n-next
TypeScript
202
star
5

vite-plugin-vue-i18n

🌐 Vite plugin for Vue I18n
TypeScript
130
star
6

eslint-plugin-vue-i18n

🌐 ESLint plugin for Vue I18n
TypeScript
120
star
7

vue-i18n-extensions

🌐 vue-i18n extensions
TypeScript
89
star
8

vue-i18n-locale-message

🌐 i18n locale messages management tool for vue-i18n
TypeScript
72
star
9

vue-i18n-composable

Composition API for vue-i18n in Vue 2.x
JavaScript
44
star
10

h3

Internationalization middleware & utilities for h3
TypeScript
25
star
11

vite-vue-i18n-starter

⚡ Vite Vue I18n Starter
Vue
24
star
12

routing

The i18n routing libraries
TypeScript
16
star
13

hono

Internationalization middleware & utilities for Hono
TypeScript
14
star
14

utils

Collection of i18n utilities
TypeScript
12
star
15

devtools

⚙ī¸ i18n devtools for debugging Intlify applications
TypeScript
11
star
16

cli

CLI Tooling for i18n development
TypeScript
10
star
17

bridging

Utilities that provide universal compatibility for Vue 2 & Vue 3
JavaScript
10
star
18

rollup-plugin-vue-i18n

🌐 vue-i18n rollup plugin for custom blocks
JavaScript
9
star
19

vue-i18n-jest

🌐 vue-jest wrapper for i18n custom blocks
JavaScript
7
star
20

intlify.dev

🌐 Website for Intlify
Vue
6
star
21

eslint-plugin-svelte

ESLint plugin for internationalization with Svelte
TypeScript
4
star
22

poeditor-service-provider

POEditor service provider for vue-i18n-locale-message
TypeScript
4
star
23

intlify-core

3
star
24

express

intlify for express middleware
TypeScript
2
star
25

blog

📔 The official Intlify blog
Vue
2
star
26

art

🎨 Artworks
1
star
27

.github

1
star