@yfwz100/vite-plugin-vue2-i18n

The missing vue 2 SFC version of vite plugin for vue-i18n, inspired by the rollup one.

Usage no npm install needed!

<script type="module">
  import yfwz100VitePluginVue2I18n from 'https://cdn.skypack.dev/@yfwz100/vite-plugin-vue2-i18n';
</script>

README

@yfwz100/vite-plugin-vue2-i18n

The missing vue 2 SFC version of vite plugin for vue-i18n, inspired by the rollup one.

Requirement

You need to install the follwoing:

Installation

npm:

$ npm i --save-dev @rollup/plugin-json
$ npm i --save-dev @rollup/plugin-yaml # if you use locale messages with YAML format
$ npm i --save-dev @yfwz100/vite-plugin-vue2-i18n

Usages

Say we have configured the vite via vite.config.js and have a sample index.html (see the vite guide):

import { defineConfig } from 'vite';
import { createVuePlugin } from '@yfwz100/vite-plugin-vue2';
import { createI18nPlugin } from '@yfwz100/vite-plugin-vue2-i18n';

export default defineConfig({
  plugins: [createVuePlugin(), createI18nPlugin()],
});

Then, we can write the i18n blocks in the vue component file:

<template>
  <p>{{ $t('hello') }}</p>
</template>

<i18n>
{
  "en": {
    "hello": "Hello World!"
  },
  "zh": {
    "hello": "你好,世界!"
  }
}
</i18n>

Finally, just run vite and see the component with i18n enabled.

Locale Messages Format

We have tested the following formats:

See more in the playground folder.

Changelog

See CHANGELOG.md.