For now, nothing really changed in the app, so let's add the page that will allow us to select the language.
- In the src/router.js file, import the PageLocale component:
import PageLocale from './components/PageLocale.vue'
- Then, add the locale route in the routes array, just before the last one (with the * path):
{ path: '/locale', name: 'locale', component: PageLocale },
- 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 file. You should now see the link in the app footer:
The links takes us to the language selection page, which is already fully translated using vue-i18n:
You can look at its source code in the components/PageLocale.vue file.
When you click on a locale button, the corresponding translations are loaded if they aren't already. In the network pane of the browser devtools, you should see a request made to other chunks each time:
