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

By:

Denisse Abreu
Sept. 10, 2022 7pm ET

Eng/Spa 6-min

# How to use Vue I18n inside the Vue 3 components? # How to translate an Article or Blog? # How to Validate an input element using i18n?

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?

First, we need to install Vue 3. If you don't know how to install Vue projects, go to Vue 3 installation guide.

Terminal

  npm init vue@latest

  # Questions from vue create
  Project name: international-tutorial
  Add TypeScript? yes

Next, we need to install Vue I18n with its Intlify Vite plugin.

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 Vue 3 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 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.