ViteSheetVue Localer
Internationalization plugin for Vue.
Installation
Install vue-localer with your favorite package manager:
sh
npm i vue-localernpm i vue-localersh
yarn add vue-localeryarn add vue-localersh
pnpm i vue-localerpnpm i vue-localersh
bun add vue-localerbun add vue-localerUsage
Used for global scope:
ts
import { createLocaler, useLocaler, useLocale } from 'vue-localer';import { createLocaler, useLocaler, useLocale } from 'vue-localer';ts
const { createLocaler, useLocaler, useLocale } = require('vue-localer');const { createLocaler, useLocaler, useLocale } = require('vue-localer');Used for local scope:
ts
import { defineLocale } from 'vue-localer';import { defineLocale } from 'vue-localer';ts
const { defineLocale } = require('vue-localer');const { defineLocale } = require('vue-localer');Used for component interpolation:
ts
import { Localer } from 'vue-localer';import { Localer } from 'vue-localer';ts
const { Localer } = require('vue-localer');const { Localer } = require('vue-localer');Getting Started
First, prepare the multilingual files.
ts
// src/locales/en-US.ts
export default {
hello: `Hello, {msg}!`,
};
// src/locales/ja-JP.ts
export default {
hello: `こんにちは、{msg}!`,
};
// src/locales/ko-KR.ts
export default {
hello: `안녕하세요, {msg}!`,
};// src/locales/en-US.ts
export default {
hello: `Hello, {msg}!`,
};
// src/locales/ja-JP.ts
export default {
hello: `こんにちは、{msg}!`,
};
// src/locales/ko-KR.ts
export default {
hello: `안녕하세요, {msg}!`,
};Instantiate vue-localer and load multiple language files.
ts
// src/plugins/localer.ts
import { createLocaler } from 'vue-localer';
import enUS from '~/locales/en-US';
export default createLocaler({
fallbackLocale: 'en-US',
messages: {
'en-US': enUS,
'ja-JP': () => import('~/locales/ja-JP'),
'ko-KR': () => import('~/locales/ko-KR'),
},
});// src/plugins/localer.ts
import { createLocaler } from 'vue-localer';
import enUS from '~/locales/en-US';
export default createLocaler({
fallbackLocale: 'en-US',
messages: {
'en-US': enUS,
'ja-JP': () => import('~/locales/ja-JP'),
'ko-KR': () => import('~/locales/ko-KR'),
},
});Register the instantiated vue-localer as app-level functionality to Vue.
ts
// src/main.ts
import { createApp } from 'vue';
import localer from '~/plugins/localer';
import App from './App.vue';
const app = createApp(App);
app.use(localer);
app.mount('#root');// src/main.ts
import { createApp } from 'vue';
import localer from '~/plugins/localer';
import App from './App.vue';
const app = createApp(App);
app.use(localer);
app.mount('#root');Next, by using useLocale, you can obtain the source of the current locale.
vue
<script lang="ts" setup>
import { useLocale } from 'vue-localer';
const locale = useLocale();
</script>
<template>
<div>{{ $f(locale.hello, { msg: 'Vue' }) }}</div>
<!-- Hello, Vue! -->
</template><script lang="ts" setup>
import { useLocale } from 'vue-localer';
const locale = useLocale();
</script>
<template>
<div>{{ $f(locale.hello, { msg: 'Vue' }) }}</div>
<!-- Hello, Vue! -->
</template>