Vue 3 I18n | Creating a multilingual Vue 3 web app
Vue 3 is the latest version of the popular JavaScript framework for building user interfaces. One of the great features of Vue 3 is its built-in internationalization support, or I18n for short. With Vue 3 I18n, it’s easy to create a multilingual Vue 3 web app that can be used by people from all over the world. In this article, we’ll walk through the steps to get you started with Vue 3 I18n and how to create a multilingual web app.
Step 1: Install Vue 3
Before you can start using Vue 3 I18n, you’ll need to have Vue 3 installed in your project. You can do this by using npm or yarn to install the Vue 3 package.
npm install vue@next
# or
yarn add vue@next
Step 2: Set up Vue 3 I18n
Once you have Vue 3 installed, you can set up Vue 3 I18n by installing the i18n package.
npm install vue-i18n@next
# or
yarn add vue-i18n@next
Step 3: Create a messages file
To create a multilingual Vue 3 web app, you’ll need to create a messages file that contains the translations for your app. This file can be in JSON format and should have key-value pairs for each language you want to support.
{
"en": {
"hello": "Hello"
},
"fr": {
"hello": "Bonjour"
}
}
Step 4: Set up Vue 3 I18n in your app
Once you have your messages file set up, you can start using Vue 3 I18n in your Vue 3 app. You’ll need to initialize the i18n plugin and pass in your messages file.
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import messages from './messages.json'
const i18n = createI18n({
legacy: false,
locale: 'en',
messages
})
App.use(i18n)
Step 5: Use translations in your app
Now that you have Vue 3 I18n set up in your app, you can start using the translations in your Vue components. You can use the $t method to access the translations in your templates, or use the t function in your script code.
{{ $t('hello') }}
// Script
const greeting = t('hello')
Conclusion
With Vue 3 I18n, creating a multilingual Vue 3 web app is simple and straightforward. By following the steps outlined in this article, you can easily add internationalization support to your Vue 3 app and provide a great user experience for people from all around the world.
One important thing related to the app config, especially for production. Inside your vite.config.js file, the path to the locales directory should be './src/i18n/locales/**' (or, well, any other path where your translation files are located).
ALSO, if you named interpolation or pluralization is NOT WORKING in production, please set runtimeOnly to false in the same file.
For example:
export default defineConfig({
plugins: [
vue(),
VueI18nPlugin({
runtimeOnly: false,
include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/locales/**'),
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
what was that you did in pluralization.js?
Thanks a lot for your complete video! That's really helpful. No such content as it on internet. Thank u, God Bless
Почему не на русском?)
How to use multiple files per language in vue3 vue-i18n?
This is very helpful! Any plans to to a similar video or blog post in Nuxt 3? Thank you!
Just an honest tip: Your voice really contains a lot of low frequency, I would recommend editing and lowering the bass of your recording. It's almost unbearable to listen to from my Bose companion 2. A real bummer because your video looks interesting
Would you like to make the same thing but in TS and Composition API? I used your video to better understand and I make a huge turn around to solve my problem with i18n, basicly I have my translations o object (yes, it works with i18n, specific files didnt went well for me), a load it when mounting the app, than i use localstorage to keep the user language, using Pinia or reactive didnt works, and I had to do the uggly but necessary reload on screen, so, app starts in the fallback lang, and if the person switch the language, it changes the localhost and reaload. The reload is terrible, but it worked. Dont have much info about the error I went up with, and had to do what i had to do hashsahahhas. Thanks for the video, great content.