https://github.com/vanilla-icecream/vue-localer
Internationalization plugin for Vue.
https://github.com/vanilla-icecream/vue-localer
i18n l10n translation vue
Last synced: 6 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 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-25T03:29:33.000Z (about 1 year ago)
- Last Synced: 2025-06-23T18:07:57.185Z (6 months ago)
- Topics: i18n, l10n, translation, vue
- Language: TypeScript
- Homepage: https://vitesheet.onrender.com/vue-localer/
- Size: 278 KB
- Stars: 2
- Watchers: 1
- 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/).