Hello everybody! I'm glad to present you a library to support the translations in your Vue project.
This translations component is very similar to Laravel Translations. You can setup inline params in your locale if needed.
Installation is very simple, in a few steps:
npm i vue-translationsYou need to setup locale file for yourself.
// locales.js
export default {
en: {
home: {
header: 'My best project ever',
},
},
ru: {
home: {
header: 'Мой лучший проект в жизни',
},
},
};import VueTranslation from 'vue-translations'
import locales from './locales.js';
Vue.use(VueTranslations);
new Vue({
mounted() {
// setup from one method
this.$translations.setup('en', locales);
// another methods:
// change current language
this.$translations.setLang('en');
// load locales
this.$translations.load(locales);
},
render: (h) => h,
});Use it in your projects is easy!
<template>
<div v-text="__t('home.header')" />
</template>Into your locale file
en: {
home: {
header: 'My best project - :name',
},
},
},Into your application
<div v-text="__t('home.header', { name: 'Project' })" />
// output: My best project - Project