0

I am new to Nuxt.js and working on an SPA project in which I need dynamic routes for a table.

Following the documentation, I was able to generate dynamic routes with: nuxt generate. But it only generates those routes for the build.

My question is, how can I work with dynamic routes in a development environment for testing and building the UI in my SPA project?

kissu
  • 40,416
  • 14
  • 65
  • 133
Mr Smiley
  • 55
  • 1
  • 6
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Sep 20 '22 at 13:19

1 Answers1

0

UPDATE: OP has finally decided to stuck with SPA.

They are created on the fly while on dev mode, follow the instructions in the doc: https://nuxtjs.org/docs/features/file-system-routing#dynamic-routes

Create a given structure like

pages
 ┣ users/
 ┃ ┗ [id].vue

Then, go to something like /users/12 and you will have access to the dynamic page. Here is an example on how to proceed: https://stackoverflow.com/a/67490633/8816585

Don't forget to restart your dev server in case you created a new route (no need for generate btw, dev is enough).

PS: the syntax is _id.vue for Nuxt2 and [id].vue for Nuxt3 in case of a dynamic route.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • I guess that's a universal project you are talking about, for an SPA project you have to add the generate method to the nuxt.config and then create those dynamic routes with nuxt generate. However, I still don't know how to work it out in dev environment because I get a 404 error page. – Mr Smiley Sep 20 '22 at 13:57
  • @MrSmiley since you gave 0 context I assumed you were using `ssr: true` yeah. You don't need to generate anything for an SPA since it's done at runtime with JS. In dev, you have SSR by default (even if using SPA or SSG with Nuxt) so it works out of the box the same way. Of course, giving more details without more effort/context from your side is difficult. – kissu Sep 20 '22 at 15:46
  • Well, actually the problem was with the naming convention that changed from to brackets instead of the underscore in Nuxt 3, like in _id.vue to [id].vue. I do not think it needs more context because it is well known that in an SPA project you have to generate those routes, and here is the reference for it https://nuxtjs.org/docs/configuration-glossary/configuration-generate/ so yes, "SPA project" says it all. – Mr Smiley Sep 20 '22 at 21:39
  • @MrSmiley you question did not mentioned Nuxt3, so I assumed it was using Nuxt2. The syntax change is true, meanwhile you still do **not** need to handle any kind of generation for dev nor for production when using `ssr: false`. Pre-rendering the routes is useful when you want to have them static, here if you use it as an SPA, the JS will generate them on initial load because this is how an SPA works (Nuxt3 is not doing things differently AFAIK). – kissu Sep 20 '22 at 23:42
  • Yes my bad.. I should have added the version, thank you. If I may ask, do you know if changing the SSR to true is possible on an SPA project? or should I just make another universal project? – Mr Smiley Sep 22 '22 at 22:01
  • @MrSmiley you can totally do that yeah. It may introduce some errors tho because not every code can run on the server (for example a specific calendar package will probably use `window` at some point) but it may not be that much of a change. As always, it depends. Making another project may be quite daunting and overkill, I recommend trying to do a simple change and see how it goes first. – kissu Sep 23 '22 at 07:25
  • 1
    Yes, I already tried changing it to SPA before asking, I encountered some errors that I honestly don't know how to solve, something related to SSH and NGINX. Imma stick to SPA, having that I don't really need SSR for now. Thank you. – Mr Smiley Sep 24 '22 at 09:44