Search code examples
internationalizationvuejs2vue-routervue-i18n

How can I translate my routes with VueJS?

How can I translate my route with VueJS and vue-i18n?

You can check my repo here: https://github.com/polikin/vuejs-boilerplate/

Ex:

/en/about-us
/fr/a-propos
Solution

  • As far I know Vue-i18n doesn't do it out of the box. But you can use route aliases:

    const router = new VueRouter({
  routes: [
    { path: '/en/about-us', component: YourComponent, alias: '/fr/a-propos' }
  ]
})

    alias can also be an array.

    In case you would go for Nuxt - there is a nuxt-i18n module which internally uses vue-i18n but adds a ton of convenience features. It prefixes the locale of your rout so you're done.