https://github.com/vanilla-icecream/vue-localer

Internationalization plugin for Vue.
https://github.com/vanilla-icecream/vue-localer

i18n l10n translation vue

Last synced: 3 months ago
JSON representation

Internationalization plugin for Vue.

• Host: GitHub
• URL: https://github.com/vanilla-icecream/vue-localer
• Owner: Vanilla-IceCream
• License: mit
• Created: 2021-03-12T07:24:13.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-25T03:29:33.000Z (4 months ago)
• Last Synced: 2024-10-26T13:41:20.265Z (4 months ago)
• Topics: i18n, l10n, translation, vue
• Language: TypeScript
• Homepage: https://vitesheet.onrender.com/vue-localer/
• Size: 278 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-localer

Internationalization plugin for Vue.

## Install

```sh

$ npm i vue-localer

# or

$ yarn add vue-localer

# or

$ pnpm i vue-localer

# or

$ bun add vue-localer

```

## Usage

First, prepare the multilingual files.

```ts

// src/locales/en-US.ts

export default {

  hello: `Hello, {msg}!`,

  world: `Hello, World!`,

};

// src/locales/ja-JP.ts

export default {

  hello: `こんにちは、{msg}!`,

  world: `こんにちは、世界！`,

};

// src/locales/ko-KR.ts

export default {

  hello: `안녕하세요, {msg}!`,

  world: `안녕하세요, 월드!`,

};

```

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'),

  },

});

```

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');

```

Next, by using `useLocale`, you can obtain the source of the current locale.

```vue

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

const { f } = useLocaler();

const locale = useLocale();

  
{{ f(locale.hello, { msg: 'Vue' }) }}

  
{{ locale.world }}


```

## Documentation

To learn more about `vue-localer`, check [its documentation](https://vitesheet.onrender.com/vue-localer/).