[solved] <NuxtPage name="some-name" /> not working
Hi all
I'm migrating a Vue 3 project to Nuxt 3 and I'm currently facing a problem with making <NuxtPage name="some-name" /> work
Here's a reproduction where you can what I'm trying to achieve.
From what I saw on the docs this is the right way, but not sure if I need to update something on the route structure
https://stackblitz.com/edit/nuxt-starter-z7j8fy?file=app%2Frouter.options.js
Thanks
Victor Neves
StackBlitz
Nuxt - ChilPages - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
21 Replies
this is the data returned from the route
All instance keys return empty objects, while if I'm on the homepage I see an instance entry with a default key set
did you create the router.options.js file yourself ?
yes
I might be missing the point here, but nuxt auto generate the routes based on the pages folder.
So your mainpage.vue has a mainpage route.
The matching Nuxtlink would be <NuxtLink to="/mainpage">Main Page</NuxtLink> as detailed here https://nuxt.com/docs/getting-started/routing.
the list of routes is coming from the server/backend
We only have a single "page" that is responsible for rendering all pages as we use a server-driven ui architecture
and our nested routes/pages are displayed inside a "service-sheet" element, and the name on the NuxtPage is for that
It's the equivalent to
<RouterView name="some-name" />when working with VueSo the issue is the <NuxtPage /> in your app.vue ?
yes, I have 2, and one of them is to render the content of child routes
on that one, I use the name attribute to identify when has to render the content, but it's not working
Do you use the nuxt devtools ?
sometimes, don't know if in this case, I can get any relevant from there
I would check if the route specified in children are properly recognized as routes
Also, from what I see, wouldn't you be better of to just pass your props directly to the page and then call the component you need with the same props and your page ?
it's more or what this does. It contains the props with the data and with that key the NuxtPage is used to render content or not
so the children routes are only there to display the appropriate data ?
the majority of the time, it's "just" forms
The concept is, instead of having a full page for child routes, we use a "service sheet" element to display the content
almost like if it was a modal
then I don't think routes are what you're looking for, it would be better in my opinion to structure the data somewhere, maybe a store, and then use components and props to display your content, especially if the data is often similar in structure
why not routes? they are routes, we just don't render them in a regular way (full page), but we use a service sheet element to display
also because I would expect this to work lei it works with router-view
Also, they have in the docs the attribute name to be used
Well the route is just pointing to a component with some data, this seems like a lot more boilerplate than necessary.
I've also tried to make NuxtPage works with those attributes, but this is out of my league, it basically only show the current route page. I recon this is due to some nuxt server/client shenanigans.
But really a component is just some structured html you can call where you need.
Instead of the <NuxtPage path="/child-route" />, himself importing InfoCard.vue, I would just call <InfoCard /> (although this would not work with the current naming, you would need to call InfoCardInfoCard.
this is a server-driven ui project
we don't build pages, just components
we have a single page file, responsible for rendering all pages. We have a component that "parses" a JSON that we receive from the backend with all components required and the data for each one them
You can see this project to have an idea of how this project works
The example is made with QWIK but I think you will get it
https://stackblitz.com/edit/github-zlgpzh-2safe5?file=src%2Fdata%2Fscene.json,src%2Futils%2Fload-component.ts,src%2Froutes%2Fdynamic%2F[slug]%2Findex.tsx
StackBlitz
Victorlmneves - Victorneves.dev Qwik (forked) - StackBlitz
Copy of my personal website using Qwik
On the preview, open the menu and click on "dynamic scene" and you will that the page is build from the JSON that I have there
it doesn't have nothing to do with the NuxtPage problem that I'm facing, it's just to show you that your suggestion for this case is not "valid"
So you are not using nuxt for its server capabilities ? You intend to just render a SPA in the end ?
I am not sure I understand why after receiving JSON it would be better to use routes instead of anything else, but you're the one with the big picture indeed.
Sorry for not being of much help, my experience to this day is quite limited !
No problem
We are using SSR, for initial rendering, and then as SPA
Manage to solve the problem
https://stackblitz.com/edit/nuxt-starter-z7j8fy
Victor Neves
StackBlitz
Nuxt - ChildPages - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.