Home

Awesome

THIS REPOSITORY IS DEPRECATED (MOVE TO HERE)

Test npm

Vite plugin for Vue I18n

<br/>

:star: Features

:cd: Installation

NPM

$ npm i --save-dev @intlify/vite-plugin-vue-i18n

YARN

$ yarn add -D @intlify/vite-plugin-vue-i18n

:warning: Notice

When this plugin is installed, Vue I18n can only use the Composition API, and if you want to use the Legacy API, you need to set the compositionOnly option to false.

Also, if you do a production build with vite, Vue I18n will automatically bundle the runtime only module. If you need on-demand compilation with Message compiler, you need to set the runtimeOnly option to false.

:rocket: Usage

i18n resources pre-compilation

Since vue-i18n@v9.0, the locale messages are handled with message compiler, which converts them to javascript functions after compiling. After compiling, message compiler converts them into javascript functions, which can improve the performance of the application.

However, with the message compiler, the javascript function conversion will not work in some environments (e.g. CSP). For this reason, vue-i18n@v9.0 and later offer a full version that includes compiler and runtime, and a runtime only version.

If you are using the runtime version, you will need to compile before importing locale messages by managing them in a file such as .json.

Vite Config

the below example that examples/composition/vite.config.ts:

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  plugins: [
    vue(), // you need to install `@vitejs/plugin-vue`
    vueI18n({
      // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
      // compositionOnly: false,

      // you need to set i18n resource including paths !
      include: path.resolve(__dirname, './path/to/src/locales/**')
    })
  ]
})

i18n custom block

The below example that examples/composition/App.vue have i18n custom block:

<template>
  <form>
    <label>{{ t('language') }}</label>
    <select v-model="locale">
      <option value="en">en</option>
      <option value="ja">ja</option>
    </select>
  </form>
  <p>{{ t('hello') }}</p>
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
  name: 'App',
  setup() {
    const { locale, t } = useI18n({
      inheritLocale: true
    })

    return { locale, t }
  }
}
</script>

<i18n>
{
  "en": {
    "language": "Language",
    "hello": "hello, world!"
  },
  "ja": {
    "language": "言語",
    "hello": "こんにちは、世界！"
  }
}
</i18n>

Locale Messages formatting

You can be used by specifying the following format in the lang attribute:

example yaml format:

<i18n lang="yaml">
en:
  hello: 'Hello World!'
ja:
  hello: 'こんにちは、世界！'
</i18n>

Static bundle importing

vite-plugin-vue-i18n allows you to statically bundle i18n resources such as json or yaml specified by the include option of the plugin described below as locale messages with the import syntax.

In this case, only one i18n resource can be statically bundled at a time with import syntax, so the these code will be redundant for multiple locales.

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
/*
 * The i18n resources in the path specified in the plugin `include` option can be read
 * as vue-i18n optimized locale messages using the import syntax
 */
import en from './src/locales/en.json'
import ja from './src/locales/ja.yaml'
import fr from './src/locales/fr.json5'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en,
    ja,
    fr
  }
})

const app = createApp()
app.use(i18n).mount('#app)

vite-plugin-vue-i18n can use the vite (rollup) mechanism to import all locales at once, using the special identifier @intlify/vite-plugin-vue-i18n/messages, as the bellow:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
/*
 * All i18n resources specified in the plugin `include` option can be loaded
 * at once using the import syntax
 */
import messages from '@intlify/vite-plugin-vue-i18n/messages'

const i18n = createI18n({
  locale: 'en',
  messages
})

const app = createApp()
app.use(i18n).mount('#app)

Client Types

If you want type definition of @intlify/vite-plugin-vue-i18n/messages, add vite-plugin-vue-i18n/client to compilerOptions.types of your tsconfig:

{
  "compilerOptions": {
    "types": ["@intlify/vite-plugin-vue-i18n/client"]
  }
}

Bundle optimizations

vite-plugin-vue-i18n allows you to support bundle size optimization provided by vue-i18n.

:package: Automatic Vue I18n bundling

As noted here, NPM provides many different builds of Vue I18n.

vite-plugin-vue-i18n will automatically select and bundle Vue I18n build according to the following vite behavior:

About details, See the here

:wrench: Options

You can specify options in the plugin option to support bundle size optimization provided by vue-i18n.

The same thing can be configured with the define option, but the plugin option is more friendly. Especially if you are using typescript, you can use intelisense.

About details, See the below section

include

runtimeOnly

compositionOnly

fullInstall

forceStringify

defaultSFCLang

globalSFCScope

:scroll: Changelog

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

:exclamation: Issues

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

:copyright: License

MIT