Set up Multi-language with vue-i18n vue.js Package using Laravel Localization
Vue-i18n is a popular internationalization (i18n) library for Vue.js that can be used in a Laravel project to handle localization. Here are the basic steps to set up localization with vue-i18n in a Laravel project:
1. Install the vue-i18n package using npm or yarn:
NPMnpm install vue-i18n@8
Yarnyarn add vue-i18n@8
2. When using with a module system, you must explicitly install the vue-i18n via Vue.use():
Add your this to your main app.js file
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const messages = {
en: enMessages,
bd: bdMessages,
};
const i18n = new VueI18n({
locale: "en", // set locale
messages, // set locale messages
});
import { enMessages } from "./constants/en";
import { bdMessages } from "./constants/bd";
const app = new Vue({
i18n, // add this in you code
});
3. create a folder in resources/js folder and name it "constants" and make a file in this constant folder en.js and bd.js
write your keyword for english in en.js file
export const enMessages = {
Language: "Language",
Candidate_Information: "Candidate Information",
message: {
hello: 'hello world'
}
}
Write your keyword for Bangla or another language keyword in bd.js file
export const bdMessages = {
Language: "ভাষা",
Candidate_Information: "আবেদনকারীর তথ্য",
message: {
hello: 'হ্যালো পৃথিবী'
}
}
4. Make a toggle switch for change language.
First of all, we need to install the toggle button.
install step 1:
npm install vue-js-toggle-button --save
Import plugin
import { ToggleButton } from 'vue-js-toggle-button'
Vue.component('ToggleButton', ToggleButton)
Create Toggle button
<toggle-button
:width="75"
:height="25"
:color="{unchecked: '#198754', checked: 'rgb(10,88,202)'}"
:font-size="12"
:show-labels="true"
:rounded="true"
@change="changeLanguage"
:labels="{checked: 'বাংলা', unchecked: 'English'}"
/>
5. Create a method for change the language
changeLanguage();
{
if (this.$i18n.locale === "en") {
localStorage.setItem("locale", "bd"); // for save to local storage
this.$i18n.locale = "bd";
} else {
localStorage.setItem("locale", "en"); // for save to local storage
this.$i18n.locale = "en";
}
}