vue-i18n<\/code> is the go-to library, and it offers a lot more than just basic string translation.<\/p>\nLet’s explore some advanced features and best practices for robust i18n in your Vue applications.<\/p>\n
—<\/p>\n
Vue i18n: Beyond the Basics<\/h3>\n
We’ll assume you have a basic vue-i18n<\/code> setup like this:<\/p>\n1. Installation:<\/strong><\/p>\nnpm install vue-i18n@next # For Vue 3\nor<\/h2>\nyarn add vue-i18n@next<\/code><\/pre>\n
2. main.js<\/code> (or main.ts<\/code>) Setup:<\/strong><\/p>\n\/\/ main.js\nimport { createApp } from 'vue'\nimport { createI18n } from 'vue-i18n'\nimport App from '.\/App.vue'\n\n\/\/ 1. Define your messages\nconst messages = {\n en: {\n welcome: 'Welcome!',\n greeting: 'Hello, {name}!',\n apple: 'no apples | {count} apple | {count} apples',\n message: {\n named: 'Hello {name}, you are using version {version}.',\n list: 'The items are {0} and {1}.'\n }\n },\n es: {\n welcome: '\u00a1Bienvenido!',\n greeting: '\u00a1Hola, {name}!',\n apple: 'sin manzanas | {count} manzana | {count} manzanas',\n message: {\n named: 'Hola {name}, est\u00e1s usando la versi\u00f3n {version}.',\n list: 'Los art\u00edculos son {0} y {1}.'\n }\n }\n}\n\n\/\/ 2. Create i18n instance with options\nconst i18n = createI18n({\n locale: 'en', \/\/ set locale\n fallbackLocale: 'en', \/\/ set fallback locale\n messages, \/\/ set locale messages\n legacy: false, \/\/ Use Composition API mode for Vue 3\n globalInjection: true, \/\/ Allows using $t, $d, $n globally without explicit import\n})\n\n\/\/ 3. Mount your app\nconst app = createApp(App)\napp.use(i18n)\napp.mount('#app')<\/code><\/pre>\n3. Basic Usage in Components:<\/strong><\/p>\n\n\n \n {{ $t('greeting', { name: 'Alice' }) }}<\/p>\n\n \n
<\/p>\n\n \n \n \n Vue<\/strong>\n <\/template>\n \n 3<\/span>\n <\/template>\n <\/i18n-t>\n<\/template><\/code><\/pre>\n—<\/p>\n
Advanced Features<\/h3>\n
### 1. Interpolation (Variables in Translations)<\/p>\n
You’ve seen basic named interpolation ({name}<\/code>). vue-i18n<\/code> supports more:<\/p>\n* Named Interpolation:<\/strong> Hello, {name}!<\/code><\/p>\n\/\/ messages\n named: 'Hello {name}, you are using version {version}.'\n \/\/ usage\n $t('message.named', { name: 'Vue', version: '3' })<\/code><\/pre>\n* List Interpolation:<\/strong> The items are {0} and {1}.<\/code><\/p>\n\/\/ messages\n list: 'The items are {0} and {1}.'\n \/\/ usage\n $t('message.list', ['item1', 'item2'])<\/code><\/pre>\n