Nuxt/Vue js - How do I synchronize path field to an i18n variable in router. I did a try but can't get to i18n

Question

import Vue from 'vue'
import Router from 'vue-router'

import homePage from '~/pages/index'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: this.$i18n.t('home'), // don't work
        component: homePage
      }
    ]
  })
}

How can I use it as in the example? Because I want to change the path according to the language change.

Answer 1

As you asked for Nuxt too, there is a module that is doing that: nuxt-i18n
Here is the related documentation for what you're looking for: routing custom paths

It looks like this in your nuxt.config.js file:

export default {
  modules: [
    ...,
    [
      'nuxt-i18n', {
        parsePages: false,
        pages: {
          about: {
            en: '/about',
            fr: '/a-propos',
          },
          'services/index': {
            en: '/services',
            fr: '/offres',
          },
        }
      }
    ],
    ...
  ]
}

Didn't tried it, but it can probably be done in full static rendering too.