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:

NPM
npm install vue-i18n@8

Yarn
yarn 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 toogle switch for change language.
First of all we need to install 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 toogle 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");
this.$i18n.locale = "bd";
} else {
localStorage.setItem("locale", "en");
this.$i18n.locale = "en";
}
}