diff --git a/README.md b/README.md index 6c2c37e..46ed220 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,12 @@ ![Test](https://github.com/intlify/vite-plugin-vue-i18n/workflows/Test/badge.svg) [![npm](https://img.shields.io/npm/v/@intlify/vite-plugin-vue-i18n.svg)](https://www.npmjs.com/package/@intlify/vite-plugin-vue-i18n) -Vite plugin for i18n resource pre-compilation and custom blocks +Vite plugin for Vue I18n + + +## :star: Features +- i18n resources pre-compilation +- i18n custom block ## :cd: Installation @@ -19,9 +24,10 @@ $ npm i --save-dev @intlify/vite-plugin-vue-i18n $ yarn add -D @intlify/vite-plugin-vue-i18n ``` -## :rocket: Usages -### i18n resource pre-compilation +## :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. @@ -35,15 +41,15 @@ the below example that `examples/composition/vite.config.ts`: ```ts import path from 'path' -import vue from '@vitejs/plugin-vue' -import { pluginI18n } from '@intlify/vite-plugin-vue-i18n' +import Vue from '@vitejs/plugin-vue' +import { VueI18n } from '@intlify/vite-plugin-vue-i18n' import type { UserConfig } from 'vite' const config: UserConfig = { plugins: [ - vue(), // you need to install `@vitejs/plugin-vue` - pluginI18n({ + Vue(), // you need to install `@vitejs/plugin-vue` + VueI18n({ // you need to set i18n resource including paths ! include: path.resolve(__dirname, './path/to/src/locales/**') }) @@ -53,9 +59,9 @@ const config: UserConfig = { export default config ``` -### `i18n` custom block +### i18n custom block -the below example that `examples/composition/App.vue` have `i18n` custom block: +the below example that `examples/composition/App.vue` have i18n custom block: ```vue