Nuxt.js: npm run generate and dynamic routes

[daspete]

Hi there,

i just wondered, how it's possible to link to dynamic routes, which are not generated?

My first thought was a htaccess, which routes to the next higher level url path.

What is the correct way to do this?

_{This question is available on Nuxt.js community (#c1923)}

[Triloworld]

Edit:

nuxt.config.js

Use like this: https://nuxtjs.org/api/configuration-generate#routes

Or for full example:

```
generate: {
routes: function (callback) {
axios.all([
axios.get('https://wp.api/wp-json/wp/v2/posts'),
axios.get('https://wp.api/wp-json/wp/v2/categories')
])
.then(axios.spread(function (posts, categories) {
let routes1 = posts.data.map((post) => {
return '/' + post.slug
});

          let routes2 = categories.data.map((category) => {
              return '/category/' + category.slug
          });

          callback(null, routes1.concat(routes2));
      }), function(err) {
          return next(err);
      });
  }

}
```

[daspete]

Hi there, thx for your reply.

But this is not the thing, i know, how to add dynamic routes.

My question is: How can i handle dynamic routes, which where not generated, for example, if there is a route collection:

/posts/_id

let's say the ids 3,4,5 are generated, so they are available at:

http://xxx/posts/3
http://xxx/posts/4
http://xxx/posts/5

what, if there was a post with the id 6, but it isn't generated yet? How can i render this route dynamically?

[Triloworld]

I have the same problem.
Situation:
there is 5 generated routes (5 posts) by json in my SSR version of site.

When I added one more from outside (new post) then is visible in frontend (because of JS) but hitting refresh will show 404 (no html file because it is dynamic route).

Right now: regenerate every time when new/edit post/page come out.
Is there better solution?
Something like duo solution (work SSR and some dynamic staff).
Will be generated only one time a week or max every day.

[baer95]

I am currently having the same problem and I found that currently there is no better solution.

It would be cool to have a callback like asyncData(), that receives the dynamic url param and can then load the dynamic content.

It seems strange to me that this functionality is not provided in Nuxt, when in Vue it works out of the box: https://router.vuejs.org/en/essentials/dynamic-matching.html.

[RaghunathHyd]

Yup, this is a bummer. Hope Nuxt guys take this up in their next version.

[uptownhr]

I have a feeling this won't be something that is going to be addressed. If you think of what a static site is, it is literraly .html files. If one is not generated, it is not going to regenerate on the fly. It is meant to be lite and not require a server environment other than a static file server.

If you really want this, just run you're app in SSR mode instead of using the static files. Nuxt does suppor this situation off the bat but wanting this with the static html files is not possible.

[daspete]

@uptownhr hmm... i just thought of a .htaccess rule, which redirects to a static dynamic.html file, which itself has a vue component, which handles the dynamic calls. i don't think, it's that complicated. But i've to test it out... but this way won't be as generic, as it could be, maybe someone has a solution for that scenario?

[baer95]

@uptownhr the point is that it could be statically hosted, whereas with any other mode node hosting is required. Vue.js can be statically hosted and still provides dynamic routes. Static HTML-files can still contain Javascript code.

[uptownhr]

@baer95 I believe you aren't understanding the missing piece of what a static web server does and how dynamic routes are handled for any SPA applications. As @daspete mentioned you normally use a redirect rule like .htaccess so you're entrypoint file is loaded for all routes. then vue-router takes over and loads the appropriate page.

There is nothing Vue-router can do to tell what your static webserver does here. You must configure this outside of vue/vue-router & nuxt.

[Triloworld]

We need that after hitting page on server, we provide files for main entry point (homepage), then using VUE to redirect.
This need properly settings with we don't have right now (I don't know how it need to be used as other there)

This solution: https://router.vuejs.org/en/essentials/dynamic-matching.html
Work if is properly configured redirect. Redirect is done in front layer, every time you hit page that is 404, you get homepage and internal frontend redirect. If this fail, we need way to provide fallback in internal 404 page and additional header in response.

I cannot create that situation as described in creator of post. How to create dynamic route after providing main vue js file because of htaccess and main entry point.

[RaghunathHyd]

I got the issue resolved in Vuejs by making small change in nginx server configuration as described in the VueRouter guide.

Basically, whenever a new dynamic route is accessed , it falls back on the main index.html file which will handle the dynamic params and renders the page after api calls etc.

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

[manniL]

Because this question seems to be inactive for quite some time, I'll close it now. If you feel like it deserves some attention because it's not fixed, feel free to ping me and I'll reopen it.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.