CODEWITHSUNDEEP
javascriptinternationalizationnuxt.jsvuetify.js
Bera Senol
Bera Senol

Reputation: 3

How to include your current locale into the url? (Nuxt.js/Vuetify)

I need to include my locale (en/nl) into my url of my nuxt.js/vuetify project, i used i18n to translate. I tried using the built in dynamic routing feature, by prefixing an underscore in my directory name, for example, the folder _lang, includes the vue pages Index, Gallery & About Us. the feature promises that because of the underscore the url part for _lang can be anything.

For example: localhost:3000/lang/gallery can also be localhost:3000/randomstring/gallery it doesnt matter. i tried to get and set that "randomstring" by using the global routing variable ($route.params.[randomstring]), i could only get it, not set it. So when i change locale (using i18n) the "randomstring" is cannot be set to the same name as the chosen locale.

My only work around was using the 'base' property of the vue-router component by hard coding the process environment variable after the default value ("/").

Another work around would be to duplicate all pages and hard code translate them into their respective folder (a folder 'en' and a folder 'nl' including all 3 pages). but this wouldn't be sustainable as you are adding pages to the site.

TL DR: How do you add a locale dynamically into your nuxt.js/vuetify project (using i18n)?

Used documentation: https://nuxtjs.org/docs/2.x/features/file-system-routing

Upvotes: 0

Views: 1170

Answers (1)

Ballon Ura
Ballon Ura

Reputation: 922

When you use nuxt/i18n module localePath method, your url will change accordingly to the current active locale.

<nuxt-link :to="localePath('about')">Go to about page</nuxt-link>.

Will redirect you to: /fr/about if 'fr' (French) is the active locale.

To set locale, use the setLocale method:

<button @click="$i18n.setLocale('fr')">Set Locale</button>

More nuxt/i18n API Reference can be found here: https://i18n.nuxtjs.org/api#methods-1

Upvotes: 0

Related Questions