Redirecting to the same page but switched language url, using Nuxt.js and Vue-i18n

Question

I am trying to redirect the user through a method when he clicks on specific buttons to change the language of the application.
These buttons are part of the standard layout of which all the pages of the project are part of so the url can differ based on which .vue page the user is on but the buttons are always the same which means that the redirecting has to be dynamic.

For example the url :

localhost/about

Should be redirected through the method (by pressing the specific button) to :

localhost/bg/about

In the project the pages are inside a folder _locale and imported also from the .vue files outside of this folder as suggested in the Nuxt documentation for localization with Vue-i18n https://nuxtjs.org/examples/i18n/
The same way are implemented the nuxt.config.js , i18n.js middleware, i18n.js plugin and index.js store files.

Since it is a Nuxt.js application and not just a Vue.js one, just committing the mutation of the store through a page changing the locale (the language) doesn't also actually change the language and even if it did ( using this.$i18n.locale = 'bg' for example ) it only changes it for the specific page and with the next navigation it uses again the fallback locale instead, so I am trying to solve it with redirecting which does use then the correct .json file of the language based on the url. I am just trying to find a way for this redirecting to be more dynamic instead of nagigating only back to the home page of each language.

If needed the github repo : https://github.com/alexgil1994/logistics-gls

Steps needed :

npm install
npm run dev

Could it be done in some better way? Is there any example of Regex for such a situation? Is there an easier way than Regex?
All suggestions are welcome.

Answer 1

It's been a long time since I made this question and I had forgotten that I had found a custom workaround so since the time came to implement it again for another project I thought of finally closing the question.

Since I searched again for possible internationalization solutions I found that there are two possible ones (at least) :

1). Custom solution using Nuxt and vue-i18n is to use a method triggered by the user when he/she chooses one of language choices :

changeLanguage(locale) {
          // -- Getting the path before starting
          var beforePath = this.$nuxt.$router.history.current.path

          // -- Removing the previous locale from the url
          var result = ''
          result = beforePath.replace( "/bg", "" )
          result = result.replace( "/gr", "" )

          // -- Redirecting to the same page but in the desired language
          if ( locale == 'gr' || locale == 'bg' ) {
            this.$nuxt.$router.replace({ path: '/' + locale + result })
          } else {
            if ( result == '/' ) {
              this.$nuxt.$router.replace({ path: '/' + locale })
            } else {
              this.$nuxt.$router.replace({ path: '/' + locale + result })
            }
          }
      }

You can see I am passing in the locale argument which is the language code that was choosen and we use the $nuxt.$router to get the current path.

2). The second solution would be to use nuxt and nuxt-i18n instead. This way one can use the method switchLocalePath as described in the official documentation. Though I haven't really tried (I remember I tried it 8 months ago but had some problems, I probably had implemented it the wrong way). Will give it another go soon.

Hopefully this will be of help to someone else