Nuxt.js: How to add dynamic routes such as /user:id/

[rwatts3]

Greetings,

How does one add dynamic routes for instance if I'm fetching data from some external source and I want to dynamically load a detail page with said route.

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

[Atinux]

Hi @rwatts3

To create the route /user/:id, simply add the pages/user/_id.vue file

Please take a look at the custom-routes example.

[rwatts3]

Sorry to reopen this issue,
everything worked perfectly until I went to generate the static project, and received this error,

Could not generate the dynamic route /foodetail/:id, please add the mapping params in nuxt.config.js (generate.routeParams).

I could not find documentation demonstrating how to do this.

[rwatts3]

To add more detail

The routes are dynamically genested via an adios function call. Therefore each id May be different depending on the data returned from the ajax call.

I saw a precious issue that suggested adding each id as an array of ids but that woildnt work on my case as the ids are in the ajax call.

[alexchopin]

Hi,

Yes there no documentation yet, we are working on it actually.
However, you can see an example here on how we use it on nuxtjs.org website.

In your case you can return a promise (with axios) in the nuxt.config.js which return an array of all IDS.

routeParams: {
    '/users/:id': function () {
      return axios.get(YOUR_API_URL)
      .then((res) {
         // res.data should be like [{id: 1}, {id: 2}...]
         return res.data
      })
    }
 }

[rwatts3]

Awesome thank you

On Tue, Dec 20, 2016, 12:46 PM Alexandre Chopin [e-mail]
wrote:

Hi,
Yes there no documentation yet, we are working on it actually.
However, you can see an example here
https://github.com/nuxt/nuxtjs.org/blob/master/nuxt.config.js on how we
use it on nuxtjs.org website.
In your case you can return a promise (with axios) in the nuxt.config.js
which return an array of all IDS.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/73#issuecomment-268339888, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AFFsSUjz_IbIt1qOC7wYmUY5mp4lywdAks5rKDCxgaJpZM4LRYqL
.

[cfharyadi]

@alexchopin when we have a new user, do we need to re generate the static files? or routeParams handling it dynamically?

Thanks

[alexchopin]

@cfharyadi yes, you need to generate again to have the new user in your static files. routeParams return the list of all user IDs, to allow nuxt generate to create a static file for each ID.

[cfharyadi]

Thanks @alexchopin, I see.. however can we have a dynamic content within the page itself? for example weather widget or basically any dynamic data from backend API.
Also what's the best way to hydrate the static file with initial state, so the page don't have to make ajax call after page load.
Thanks again!

[Atinux]

@cfharyadi are you talking about nuxt generate or simply nuxt?

You might want to try it on your own to understand more how it works :)
https://nuxtjs.org/guide/

The point of nuxt.js is to render the page from the server-side and avoid any ajax call after the page load.

[elouhenpera]

@alexchopin or anybody really:

Does this work with alphanumeric params? I'm using dynamic routes and parameters have no predefined pattern. eg. 'SU001A5978', 'IOCC' or 'AN005476'

Currently getting 'Could not generate the dynamic route…' error.

Thanks.

[alexchopin]

@elouhenpera can you show use you setup for generate option in your nuxt.config.js to help you?

[elouhenpera]

@alexchopin Thanks for quick response. Meanwhile, I finally got routeParams sorted out. Now it is rendering my 1000 or so dynamic routes.

However, some of them are spitting out "UnhandledPromiseRejectionWarning" -errors. Those too are probably my own fault…

[newopa83]

nuxt.config.js

module.exports = {
mode : 'spa',
...
}

It can be solved.

[benwinding]

@newopa83 mode: spa still doesn't allow dynamic routes to work with nuxt generate on a static server, also mentions it in the documentation nuxtjs.org/guide/routing:

Solution

Go from dynamic paths like /post/2914466, to url queries /post?id=2914466

Template

<template>
  <div>
    Post: {{ $route.query.id }}
  </div>
</template>

Then it works on static hosting!!

[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.