DEV Community

Cover image for Set up Multi-language with vue-i18n vue.js Package using Laravel Localization
Tanvir Rahman Prince
Tanvir Rahman Prince

Posted on

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 install vue-i18n@8

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

:color="{unchecked: '#198754', checked: 'rgb(10,88,202)'}"
:labels="{checked: 'বাংলা', unchecked: 'English'}"

5. Create a method for change the language

if (this.$i18n.locale === "en") {
localStorage.setItem("locale", "bd");
this.$i18n.locale = "bd";
} else {
localStorage.setItem("locale", "en");
this.$i18n.locale = "en";

Image description

Image description

Oldest comments (0)