Home

For my i18n I want to change dynamically the path name of my route, but have the same component associated to it.
For instance:

pages
about-us.vue

// overwrite or extend the routes automatically generated by nuxt
import paths from 'paths'

const lang = $store.lang
const aboutUsPath = paths[lang].about

const router = new VueRouter({
  routes: [
    {
      path: aboutUsPath, // it changes according to the country code
      name: 'about-us',
      component: AboutUs
    }
  ]
})

and then I use nuxt linkto as follow:

<nuxt-link :to="{ name: 'about-us' }> {{ content.navigation.about }} </nuxt-link>

With the current implementation I have to create under pages many files:
pages
about-us.vue
chi-siamo.vue
quienes-somos.vue
qui-sommes-nous.vue

and then in each of them import the same component, where I load dynamically the localised content. Not very elegant solution.

How can I access nuxt routes and customize them as I want?