2 | {{ $t('button.add') }}
3 | Current: {{ current }}
4 | Missing key: {{ $t('button.description') }}
5 |
13 |
14 |
15 |
16 |
17 |
18 |
69 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## 🔥️ Vue I18n Lite
2 |
3 | A super lightweight and minimal plugin that introduces internationalization into your Vue.js app with a simple API
4 |
5 | ## 🚀 Usage
6 | ### Plugin
7 |
8 | ```ts
9 | import { createApp } from 'vue';
10 | import { createI18n } from 'vue-i18n-lite';
11 | import App from './App.vue';
12 |
13 | const i18n = createI18n({
14 | locale: 'en',
15 | fallbackLocale: 'en',
16 | messages: {
17 | 'en': {
18 | home: 'Home'
19 | }
20 | }
21 | })
22 |
23 | const app = createApp(App);
24 | app.use(i18n);
25 |
26 | ```
27 | ### Composition API
28 |
29 | ```ts
30 | import { useI18n } from 'vue-i18n-lite';
31 |
32 | export default {
33 | setup() {
34 | const i18n = useI18n()
35 | i18n.createI18n({
36 | locale: 'en',
37 | fallbackLocale: 'en',
38 | messages: {
39 | 'en': {
40 | home: 'Home'
41 | }
42 | }
43 | })
44 |
45 | const { current, changeLocale } = i18n
46 |
47 | return {
48 | current,
49 | changeLocale
50 | }
51 | }
52 | }
53 | ```
54 |
55 | ## 📦 Install
56 |
57 | ```bash
58 | yarn add vue-i18n-lite
59 | ```
60 |
61 | ### CDN
62 |
63 | ```html
64 |
65 | ```
66 |
67 | It will be exposed to global as `window.VueI18nLite`
68 |
69 | ## Changelog
70 |
71 | Detail changes for each release are documented in the [`CHANGELOG.md file`](https://github.com/FrontLabsOfficial/vue-i18n-lite/blob/master/CHANGELOG.md).
72 |
73 | ## ❤️ Thanks
74 |
75 | This project is inspired by the following awesome projects.
76 | - [dot-prop](https://github.com/sindresorhus/dot-prop)
77 | - [vue-i18n](https://github.com/kazupon/vue-i18n)
78 |
79 | ## 📄 License
80 |
81 | MIT License © 2021 [Erik Pham](https://github.com/erikpham)
82 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { App, ref, reactive, readonly, toRaw } from 'vue'
2 | import {
3 | getMessage,
4 | isEmpty,
5 | mergeDeep,
6 | parseLocaleValues,
7 | replaceLocaleValues,
8 | } from './utils'
9 | import {
10 | I18nOptions,
11 | I18nLocale,
12 | I18nLocales,
13 | I18n,
14 | I18nValues,
15 | I18nLocaleMessages,
16 | } from './types'
17 | import { vueI18nKey } from './injectionSymbols'
18 |
19 | /**
20 | * Creates a I18n instance that can be used by a Vue app.
21 | *
22 | * @param options - {@link I18nOptions}
23 | */
24 | export function createI18n(options?: I18nOptions): I18n {
25 | const initOptions = Object.assign(
26 | { locale: 'en', fallbackLocale: 'en', messages: {} },
27 | options
28 | )
29 | const current = ref(initOptions.locale)
30 | const locales: I18nLocales = reactive({})
31 | Object.entries(initOptions.messages).forEach(([key, messages]) => {
32 | locales[key] = messages
33 | })
34 |
35 | return {
36 | t(key: string, option?: I18nLocale | I18nValues): string {
37 | if (!key) {
38 | return ''
39 | }
40 |
41 | const locale =
42 | typeof option === 'string' && option ? option : current.value
43 |
44 | let message =
45 | getMessage(locales[locale], key) ||
46 | getMessage(locales[initOptions.fallbackLocale], key)
47 | if (option && typeof option !== 'string') {
48 | const values = parseLocaleValues(message, option)
49 | if (!isEmpty(values)) {
50 | message = replaceLocaleValues(message, values)
51 | }
52 | }
53 |
54 | return message || key
55 | },
56 | current: readonly(current),
57 | options: readonly(options || {}),
58 | install(app: App) {
59 | const context = this
60 | app.config.globalProperties.$t = context.t
61 | app.provide(vueI18nKey, context)
62 | },
63 | changeLocale(locale: string) {
64 | current.value = locale
65 | },
66 | setLocaleMessage(locale: string, messages: I18nLocaleMessages) {
67 | locales[locale] = mergeDeep(toRaw(locales[locale] || {}), messages)
68 | },
69 | getLocaleMessage(locale: I18nLocale): I18nLocaleMessages {
70 | return locales[locale] || {}
71 | },
72 | }
73 | }
74 |
75 | export * from './useApi'
76 | export * from './globalExtensions'
77 | export * from './types'
78 |
79 | /**
80 | * Super lightweight internationalization (i18n) plugin for Vue 3
81 | *
82 | * @packageDocumentation
83 | */
84 |
--------------------------------------------------------------------------------
/__tests__/i18n.spec.ts:
--------------------------------------------------------------------------------
1 | import { createI18n } from '../src'
2 | import { I18n } from '../src'
3 |
4 | const defaultMessages = {
5 | home: {
6 | general: {
7 | button: 'Home',
8 | },
9 | },
10 | }
11 |
12 | describe('i18n', () => {
13 | describe('Init', () => {
14 | it('create plugin', () => {
15 | const plugin = createI18n()
16 | expect(plugin.current.value).toEqual('en')
17 | })
18 |
19 | it('create plugin with options', () => {
20 | const plugin = createI18n({
21 | locale: 'vi',
22 | })
23 | expect(plugin.current.value).toEqual('vi')
24 | })
25 | })
26 |
27 | describe('Plugin', () => {
28 | let plugin: I18n
29 | beforeEach(() => {
30 | plugin = createI18n({
31 | locale: 'en',
32 | messages: {
33 | en: defaultMessages,
34 | },
35 | })
36 | })
37 |
38 | it('message', () => {
39 | expect(plugin.t('home.general.button')).toEqual('Home')
40 | })
41 |
42 | it('extend and override message', () => {
43 | const messages = {
44 | home: {
45 | general: {
46 | button: 'Add to cart',
47 | cancel: 'Cancel',
48 | },
49 | },
50 | }
51 |
52 | plugin.setLocaleMessage('en', messages)
53 | expect(plugin.t('home.general.button')).toEqual(
54 | messages.home.general.button
55 | )
56 | expect(plugin.t('home.general.cancel')).toEqual(
57 | messages.home.general.cancel
58 | )
59 | })
60 |
61 | it('change locale', () => {
62 | const messages = {
63 | home: {
64 | general: {
65 | button: 'Trang chủ',
66 | },
67 | },
68 | }
69 |
70 | plugin.setLocaleMessage('vi', messages)
71 | plugin.changeLocale('vi')
72 | expect(plugin.t('home.general.button')).toEqual(
73 | messages.home.general.button
74 | )
75 | })
76 |
77 | it('message with values', () => {
78 | const messages = {
79 | cart: {
80 | alert: 'Total products {total}. Total amount: ${amount}',
81 | },
82 | }
83 |
84 | plugin.setLocaleMessage('en', messages)
85 | expect(plugin.t('cart.alert', { total: 10, amount: 9999 })).toEqual(
86 | 'Total products 10. Total amount: $9999'
87 | )
88 | expect(plugin.t('cart.alert', [10])).toEqual(
89 | 'Total products 10. Total amount: ${amount}'
90 | )
91 | })
92 | })
93 | })
94 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-i18n-lite",
3 | "version": "1.0.2",
4 | "main": "dist/vue-i18n-lite.cjs.js",
5 | "unpkg": "dist/vue-i18n-lite.global.js",
6 | "jsdelivr": "dist/vue-i18n-lite.global.js",
7 | "module": "dist/vue-i18n-lite.esm-bundler.js",
8 | "types": "dist/vue-i18n-lite.d.ts",
9 | "sideEffects": false,
10 | "scripts": {
11 | "serve": "cd playground && yarn serve",
12 | "build": "rollup -c rollup.config.js",
13 | "build:dts": "api-extractor run --local --verbose && tail -n +2 src/globalExtensions.ts >> dist/vue-i18n-lite.d.ts",
14 | "test": "jest",
15 | "release": "node scripts/release.js",
16 | "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/FrontLabsOfficial/vue-i18n-lite.git"
21 | },
22 | "keywords": [
23 | "vue",
24 | "i18n",
25 | "vue-i18n",
26 | "vue-i18n-lite"
27 | ],
28 | "author": "Erik Pham