How to use i18n plugin

[niutech]

If you want to use internationalization (i18n) plugin to provide translations with Petite Vue, I recommend using my Petite Vue I18n Lite. It's a piece of cake!

First, add it by running: yarn add petite-vue-i18n-lite

Then add the following script:

import {createApp, reactive} from 'petite-vue';
import {createI18n} from 'petite-vue-i18n-lite';
import en from './lang/en.json';
const i18n = reactive(createI18n({locale: 'en', messages: {en}}));
createApp(i18n).directive('t', ({el, get, effect}) => effect(() => el.textContent = i18n.t(get()))).mount();

Now you can use it your HTML like this: <p v-t="'message'">Fallback message</p> or <p>{{t('message')}}</p>.

The v-t directive is optional and you can safely skip it if you wish not to use the fallback whenever JS in disabled.

You can get the current locale simply by inserting {{current}} and change the locale by invoking changeLocale('en').