Internationalization with Vue 3, Vite, and I18n.

The complete guide to creating an international website with Vue 3 and Vite.

Denisse Avatar

By:

Denisse Abreu
Sept. 10, 2022 7pm ET

Eng/Spa 6-min

Hello 👋🏼, In this tutorial, I will show you how to build an international website. I will cover everything from how to translate keywords to the translation of an entire blog and how to validate an input element using its corresponding translation. Our working environment is Vue 3 with the latest Vite integration plus TypeScript, Vue I18n, and Vee Validate.
Let's get started!

  • What we're going to build?

Terminal
npm init vue@latest # Questions from vue create Project name: international-tutorial Add TypeScript? yes
Terminal
npm install vue-i18n@9 npm i --save-dev @intlify/vite-plugin-vue-i18n
  • Go to vite.config.ts, import, and use the Intlify plugin.
vite.config.ts
  • Inside the src folder, create the locales; this folder will contain the languages JSON files with the keywords we'll use.

File Structure

  • Paste the following JSON keywords in their corresponding language file.
en.json
es.json
fr.json

Next, it's time to use the JSON files we just created. Inside the src folder, make a new directory and call it plugins; inside this plugins folder, create i18n.ts, import the languages, and export this i18n file.

src/plugins/i18n.ts
  • Go to main.ts and import the I18n file that we just created.
src/main.ts

How to use Vue I18n inside the components?

Now, it's time to import I18n and make changes to the U/I. In the App.vue file, create a dropdown button with the three languages we have in the locales folder. This button will translate the welcome message we're passing as a prop to the hello world component.

src/App.vue

Demonstration of the Hello world component and the select element.

  • If you want the CSS, copy it below 👇.
src/App.vue
select { width: 11rem; height: 2rem; margin-top: 1rem; border: solid green 1px; border-radius: 3px; } input { height: 2rem; width: 11rem; border: solid green 1px; border-radius: 3px; } div.select { text-align: center; }

How to translate an entire Article or Blog?

Translating keywords is fine, but what if you have a whole blog and want to translate it? It's pretty simple, go to the components folder and add TheWelcomeEs.vue; this component will have the Spanish translation of the original TheWelcome.vue component; Do this for every language you want and check conditionally the language keyword we previously added to the JSON locales folder or check directly the I18n locale value. ⚠ Don't forget to import these new files into App.vue.

src/App.vue

How to Validate an input element using i18n?

If you have an input element in your website, you'll want to show your user the right feedback message in the language of his choice. In the last part of this guide, we'll build an input element and use Vee Validate with i18n support. First, install the Vee Validate library with its i18n.

Terminal
npm i vee-validate --save npm install @vee-validate/i18n @vee-validate/rules

Go to main.ts and import the libraries. When importing Vee Validate rules is recommended to import only the rules you need; If you want to check the list of rules, go to the Vee Validate Rules list.

src/main.ts

This is The last part of this guide. Go to App.vue, import field and locale from the Vee Validate package, and build your input element.

src/App.vue

Wrap your input element inside the Field component from Vee Validate; pass your rules and get the errors using the v-slot. That's all for now, see you next time!

Input element inside Field from Vee Validate.