Set up Multi-language with vue-i18n vue.js Package using Laravel Localization

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 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";
    }
}

Image description

Image description