Vue i18n mini

This package provides a minimalistic (but complete), very lightweight, easy-to-use i18n solution for Vue 3.

For companion library, see Express i18n mini

Features

• Lightweight
• Uses lodash template for string interpolation
• ...

Installation

npm i vue-i18n-mini

Usage

Usually you may want to use internationalization according to the following scenarios:

1. A language prefix in URL defines the current language. This scenario is preferred, primarily, for a website where SEO is desired. No prefix means either the default language or we have to redirect to a URL with a prefix.

2. We do not use language prefixes in URLs here, instead the current language is always defined based on browser's setting: the browser gives ordered list of preferred languages, so we use it to find the best suited language. Additionally to this, we give to an end user ability to choose the different language from our list, and we store this user preference, say, in cookie or in localStorage.

3. The current language may initially be defined based on the browser's setting (exactly as in the previous scenario), but actually we rely on a profile option of a logged in user. It is usually stored on the server (although it can be cached on the browser side, of course).

4. Some combinations of the above are possible: for example, the part of our site uses the first scheme (language prefix in URL), and the other part uses the second scheme (user private zone, where no URL prefix is required).

Vue i18n mini tries to cover all these use-cases. Let's take a look at how to use it in practice.

Configure

import {createI18n} from 'vue-i18n-mini'

export const i18n = createI18n({
  defaultLang: 'en',
  fallbackLang: 'en',
  langData: {
    en: {
      hello: 'Hello {name}!'
    },
    de: {
      hello: 'Hallo {name}!'
    }
  }
})

The defaultLang and langData are the only required options.

The defaultLang will be used if no better languages available to meet user's preference.

The fallbackLang is a language to use if translations in the current language are not available. If not set or null, such fallback does not occur.

langData contains all the available languages and messages. Actually, it's recommended to always lazy-load translations instead of including them directly. In this case, they will be loaded asynchronously only when they are needed:

import {createI18n} from 'vue-i18n-mini'

export const i18n = createI18n({
  defaultLang: 'en',
  fallbackLang: 'en',
  langData: {
    en: () => import('./locales/en'),
    de: () => import('./locales/de'),
  }
})

Now, plug it in:

import {createApp} from 'vue'
import {i18n} from './i18n'

createApp(...)
  .use(i18n)
  .mount('#app')

Now, if you want to use language prefixes in URLs, use Vue router:

import {createRouter} from 'vue-router'

const router = createRouter({
  // options...
})

i18n.useRouter(router)

If you do not use router, you need to initialize the library somewhere. This will read user preferred (saved) language, or will try to find the best language based on the browser's preference. As simple as that:

i18n.init()

Alternatively, inside a component:

export default {
  methods: {
    someMethod() {
      this.$i18n.init()
    }
  }
}

Use

<template>
  <div>{{$t('hello', {name: 'World'})}}</div>
</template>

License

This package is licensed under the MIT license.