Vue.js 2 Web Development Projects

Changing Language page

For now, nothing really changed in the app, so let's add the page that will allow us to select the language.

1. In the src/router.js file, import the PageLocale component:

      import PageLocale from './components/PageLocale.vue'

2. Then, add the locale route in the routes array, just before the last one (with the * path):

      { path: '/locale', name: 'locale', component: PageLocale },

3. In the AppFooter.vue component, add this router link to the template:

      <div v-if="$route.name !== 'locale'">        <router-link :to="{ name: 'locale' }">{{ $t('change-lang') }}        </router-link>      </div>

As you can see in the preceding code, we use the $t provided by vue-i18n to display a translated text. The argument correspond to the key in the locale ...