Nuxt.js: routes don't support "children"?

[beeplin]

I am not sure if I understand it right:

not supporting "children" in routes means we cannot user <router-view> in vue components, and therefore means all vue files in /pages are parallel stand-alone pages and cannot be nested. Since theres is actually no "parent component" and "child component", we have no way to pass props and slots into a component in /pages. The only way to pass something in a component is via router params.

Is that correct?

_{This feature request is available on Nuxt.js community (#c16)}

[Atinux]

It is 100% correct.

Actually you can implement your own child views easily by watching on $route in the page component and using with the is property.

I can create and example if you want to see how to implement it?

[beeplin]

sure, looking forward to the example. Many thanks!

[beeplin]

looks like currently nuxt is mainly for building multiple-page apps? If we are building a single-page app but still want server rendered components according to the router url, I guess the most natual way is to support nested components (children and )

[Atinux]

@beeplin please take a look at this demo: https://hyperdev.com/#!/project/nuxt-children-routes

Live demo: https://nuxt-children-routes.hyperdev.space/parent

I use <component :is="child"/> to handle the child component of the given route, I also added a custom route in nuxt.config.js to tell Nuxt.js to call the pages/index.vue component on the /parent/:component? route.

[Atinux]

I am not sure to understand when you are talking about a single-page app, could you describe me what you mean by single-page app?

[beeplin]

Sorry for the vagueness of the term 'single-page app'. Let me take your recent nuxt-children-routes as an example:

When we are at /parent and click a link to go to /parent/foo , a 'multiple-page app' would re-render both parent and foo on the server, and then transfer the whole new html page (including both parent and foo) to the browser to replace the whole old page. So if we look from the browser side, \parent and \parent\foo are two different pages served by the server.

But in a so-called single-page app, when going from \parent to \parent\foo, the parent component should be reused. Only the new component foo is created and rendered, and then inserted into its proper position in the existing page. So if we look from the browser, we don't see a brand new page loaded, but only see a part of the existing page inserted/patched/removed.

Which is the case in the actual nuxt-children-routes example?

[Atinux]

It is indeed the case with nuxt-children-routes 😄

[beeplin]

You mean it's like 'single-page app'? That's wonderful~

If so, is it possible to support children in routes and < router-view> in template? Using :is="xxx" can handle simple cases, but when the router goes complicated, it would be terrible to manually parse the url and handle multiple layers of :is. It would be perfect if we could use vue-router in the same old way as if we were using client-side-rendering.

[Atinux]

I'm re-opening this issue to know what think the community about it.

We will need to find a way to create child route with the pages folder as well and not only in the nuxt.config.js configuration.

For example:

-| pages/
----| user/
-------| index.vue
-------| profile.vue
-------| settings.vue
----| user.vue

The rule will be:

If a folder has the same name of a page, all the pages inside this folder will be the page children

This would generate:

[
  {
    path: '/user',
    component: 'pages/user.vue',
    children: [
      { path: '', component: 'pages/user/index.vue' },
      { path: 'profile', component: 'pages/user/profile.vue' },
      { path: 'settings', component: 'pages/user/settings.vue' }
    ]
  }
]

And pages/user.vue will have to use <router-view></router-view> inside its template.

[Atinux]

Hi @beeplin

You can now create children routes with the version 0.9.0 of Nuxt.js

Explanations here

[beeplin]

cool！

[dotnetCarpenter]

@Atinux I still don't see how the _id.vue component is re-used. As far as I can tell the entire <div class="user"> is removed from DOM an re-inserted.

My use-case is that I have a <object> element and need to change the data attribute but I can't use a child-route as it is implemented today because it removes the element (vue.js should do a diff on the v-node and just update the data attribute) instead of just updating the data attribute.

Am I missing something from your example?

[dotnetCarpenter]

Ahh.. I should use <nuxt-child/> instead.

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