Get routes.js file from api call about router-module

[yann-yinn]

One way would be to generate router.js with node : get datas from your CMS and write / update your file router.js on the server / filesystem. You will need to set a cron.

[yann-yinn]

hum, smarter than the cron : when creating a new page on cms side, you could do an http POST request to your nuxtjs app with all paths datas. (your nuxtjs application could expose some /api/paths with express & node; and this api would write your router.js file )

[ksolberg]

Can this module be async? Something like:

export async function createRouter() {
  let routes = await axios.get('/routes.json') 
  return new Router({
    mode: 'history',
    routes: routes.map(route => {
      return {
        path: route.path,
        component: components[route.template]
      }
    })
  })
}

I might be doing something wrong here, but if I do like above, I get this error message: "router.resolve is not a function"

[yann-yinn]

@ksolberg nope it can't but it might be useful.
In my case i would like to let Drupal 8 handle aliases / url-rewriting, so this would be a good place to do it. (i can ask Drupal : "what is the Drupal context for '/my-clean-url', and it can answer me : " this is an alias for a page content type, user is connected and current language is english". )
The only route i would need in this case would be "/:alias" in my router, and a dynamic component for it.

[Atinux]

Hi,

Actually createRouter cannot be asynchronous since it's nuxt.js which handle this, otherwise, I suggest that you have a /* route and then you can call your API to check if the route exists or no.

PS: please mention me so I can keep track of this issue.

[yann-yinn]

@Atinux could you be more precise on that point ?

I suggest that you have a /* route and then you can call your API to check if the route exists or no.

It tried something like this

     {
        path: '/:path*',
        component: Index
      }

and the Index component use dynamic components to load the right component given a webservice called in Index.

BUT i loose SSR since it is only available for component declared in the router.

In any case, this is not the way nuxt is supposed to work, so not sure i should go further in this direction

PS : Hum, seems to me that this way of doing things is wrong. I want to use nice url-rewriting capabilities from Drupal, the best way would be to create url-rewriting with express / node server; calling Drupal aliases as a webservice.

PS-2 : but that won't work for client side -_-

[Atinux]

I see @nyl-auster

You should not loose SSR since you will have asyncData available into your Index component and you can give this data to your dynamic component directly into it.

[yann-yinn]

@Atinux yep right, thx, Index will have a lot of logic but it could be split in different files... that could work.

[yann-yinn]

@jamestowers maybe this quick POC might help you : https://gist.github.com/nyl-auster/ecf5e4ac22ac4fd886b490441e7febd0

Router catch all paths with an "index" component. This index component call a webservice giving me info about which component i need to use according to what is returned by Drupal. Than i inject this component dynamically, passing it datas as props to get SSR working.

[jamestowers]

@nyl-auster Nice!
I'm using Laravel Lumen to run the CMS's API so when I get a sec i'll see if I can tweak your gist to get it to work with that.
Thanks.

[yann-yinn]

@jamestowers i think this definitely an anti-pattern : the only "real" nuxt page component is then the "Index" one : you loose a lot of benefits of Nuxt (all custom page components properties like transition, layout etc ...).

The best way is to manually replicate router with Nuxt (or maybe generate it automatically if this is hardly needed : #4 (comment) )