Intermediate LevelVue JS
How do you implement multi-language localization in Vue 3 using vue-i18n?
❓ Interview Prompt: Explain Vue internationalization with vue-i18n v9+, Composition API useI18n() hook, locale switching, and translation keys.
'vue-i18n' (v9+) is the official internationalization plugin for Vue 3.
Setup and Usage:
1
Initialize 'createI18n({ legacy: false, locale: "en", messages })'.
2
Use '$t("key")' in templates or 'const { t, locale } = useI18n()' in setup.
3
Switch active application language dynamically by mutating 'locale.value = "fr"'!
Code Implementation Example
html
<script setup>
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const changeLanguage = (lang) => locale.value = lang;
</script>
<template>
<div>
<h1>{{ $t('welcome_message') }}</h1>
<button @click="changeLanguage('es')">Spanish</button>
</div>
</template>💡Multi-language localization and reactive locale switching using vue-i18n.
🎯 Interview Key Takeaway
Use vue-i18n with Composition API useI18n() to handle reactive multi-language translation and locale switching.
#vue-i18n#Localization#i18n#Intermediate
Back to all Vue JS Questions→