What are you looking for?
Search by 3MGC
What are you looking for?
Welcome to our Vue 3 localization tutorial! Today, we'll show you how to make your Vue.js app speak different languages easily. In the ever-changing world of web development, keeping up with the latest tools is important. Vue 3 is a cool JavaScript framework, and adding localization will make your app user-friendly for people around the world. Let's get started and make your Vue 3 app more versatile!
npm i vue-i18n
Inside data.js we will have locales supported by our app. so we can access it anywhere in our app as needed.
In our config/i18n.js
import { createI18n } from "vue-i18n";
import ur from "../lang/ur.json";
import en from "../lang/en.json";
import { locales } from "../data";
// 2. Create i18n instance with options
const supportedLocales = locales;
const userLocale = localStorage.getItem("locale");
const locale = supportedLocales.includes(userLocale) ? userLocale : "en";
const i18n = createI18n({
locale: locale, // set locale
fallbackLocale: "en", // set fallback locale
messages: {
en: en,
ur: ur,
},
});
export default i18n;
In main.js import 1i8n.js
import i18n from './config/i18n.js'
app.use(i18n)
<select v-model="currentLocale" @change="setLocale" class="form-select">
<option v-for="locale in locales" :key="locale">{{ locale }}</option>
</select>
<script>
import { locales } from '../../data';
export default {
name: 'NavbarComponent',
data() {
return {
locales: locales,
currentLocale: localStorage.getItem('locale') || 'en'
}
},
methods: {
setLocale() {
localStorage.setItem('locale', this.currentLocale)
this.$i18n.locale = this.currentLocale;
}
}
}
</script>
That's it! You have successfully implemented localization for your vue 3 app.