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>

Besides that, you can also use type inference for useLocale.

// src/locales/index.ts
import { useLocale } from 'vue-localer';

import type enUS from './en-US';

export default () => useLocale<typeof enUS>();

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

const locale = useLocale(); 
const globalLocale = useGlobalLocale(); 
</script>

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

It's worth noting that the name has been changed from useLocale to useGlobalLocale mainly to distinguish between local and global scopes.

As for the local scope, you can check it out here.