CODEWITHSUNDEEP
vue.jsvue-routernuxt.js
Timar Ivo Batis
Timar Ivo Batis

Reputation: 1996

Dynamically choose compontent in Nuxt Router

I would like to render the same component for all languages. The translation will be done inside the component. The url and component relationship should look like so:

pseudocode:
browserurl: "/blogpost_1"
nuxtcomponent: "blogpost_1"

browserurl: "/en/blogpost_1"
nuxtcomponent: "blogpost_1"

browserurl: "/randompage"
nuxtcomponent: "randompage"

browserurl: "/en/randompage"
nuxtcomponent: "randompage"

My approach was to do the following, unfortunately i cant find a way to access pathMatch.

router: {
   extendRoutes(routes, resolve){
   routes.push({
     path: 'en/*',
     component: resolve(__dirname, '/' + somehow.access.pathMatch )
})
}

}

Upvotes: 1

Views: 663

Answers (1)

Michal Levý
Michal Levý

Reputation: 37753

I don't think you can resolve component dynamically. component: expects component instance or Promise. Once the promise resolves, result is cached. I can imagine solution using navigation guards and switching components "by hand" but that would require to import views by hand etc.

So your best bet is to rewrite paths generated by nuxt to include optional path segment (from /about to /:lang(en|jp)?/about so it accepts paths like /en/about) - your component then receives lang parameter which will be empty for /about otherwise it will contain language....

  1. Define available translations in meta
  2. Rewrite the paths of pages with translations

In your page:

<script>
export default {
  meta: {
    translations: ['en', 'jp']
  }
}
</script>

In Nuxt config (pseudo - not tested)

router: {
    extendRoutes(routes, resolve) {
        const routesWithTranslation = routes.filter(i => i.meta.translations && i.meta.translations.length > 0);

        routesWithTranslation.forEach(route => {
            const segment = `/:lang(${route.meta.translations.join("|")})?`
            route.path = segment + route.path           
        })
}

Upvotes: 2

Related Questions