A lightweight, zero dependency and customisable translation plugin for Vue. It is quite similar to plugins like vue-i18n or vue-i18next. But then a lot cleaner, leaner and more customizable.
import vueTinyTrans from "vue-tiny-trans"; // import messages from "@/locales"; const messages = [ en: { "Hello World": "Hello World" }, nl: { "Hello World": "Hallo Wereld" } ] Vue.use(vueTinyTrans, { locale: 'en', // set locale fallbackLocale: 'en', messages });Vue.use(vueTinyTrans, { locale: 'en', fallbackLocale: 'en', countTag: `{count}`, countSeperator: '|', messages: {}, fallbackTranslation: '__NO_TRANSLATION__', // Add loggers, push keys to API, ... onMissingKey (key, { messages, locale, fallbackLocale }) { console.log(`Missing key for language "${locale}": ${key}`) return messages[fallbackLocale][key] }, getKey (key, { messages = {}, locale }) { const translation = messages[locale][key] return translation } });Vue.use(vueTinyT, { locale: 'en', // set locale fallbackLocale: 'en', messages }, "$trans");$t("Hello World") $tc("Last hour | Last {count} hours", 3)<script> export default { data: (vm) => ({ languages: vm.$i18n.languages, }), methods: { click(item) { this.$i18n.locale = item; } } }; </script> <template> <select v-model="$i18n.locale"> <option v-for="(lang, i) in languages" :key="i" :value="lang"> {{ lang }} </option> </select> </template> new Vue({ watch: { '$i18n.locale'(newValue) { console.log(newValue); // Do something } } });