vue-localer

Internationalization plugin for Vue.

Installation

Install vue-localer with your favorite package manager:

npm

npm i vue-localer

Yarn

yarn add vue-localer

pnpm

pnpm i vue-localer

Bun

bun add vue-localer

Usage

Used for global scope:

ESM

import { createLocaler, useLocaler, useLocale } from 'vue-localer';

CJS

const { createLocaler, useLocaler, useLocale } = require('vue-localer');

Used for local scope:

ESM

import { defineLocale } from 'vue-localer';

CJS

const { defineLocale } = require('vue-localer');

Used for component interpolation:

ESM

import { Localer } from 'vue-localer';

CJS

const { Localer } = require('vue-localer');

Getting Started

First, prepare the multilingual files.

// 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.

// 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.

// 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.

<script lang="ts" setup>
import { useLocale } from 'vue-localer';

const locale = useLocale();
</script>

<template>
  <div>{{ $f(locale.hello, { msg: 'Vue' }) }}</div>
  <!-- Hello, Vue! -->
</template>