Nuxt.js - How to use layout inside layout

Question

i have my deafult layout and i whant to make a page with a layout and inside the layout a component that will be change insdie and chacnge the url to

how i do that with nuxt?

somthing like this pic:

i have my base layout in red and i have a page layout in blue now i have a links ander the Dashbord and i want whnan i click on the links the black box inside change only by other component and the url chacnge to but i didnt the nuxt call again to the blue layout

Answer 1

I had a similar issue and solved by nesting pages using <nuxt-child/>.

GIF: How it works

GitHub: Nuxt.js Nested Routes Example Repository (not official)

Create a parent page like pages/group-foo.vue:

<template>
  <div>
    <!-- ... -->
    <nuxt-child />
  </div>
</template>

Then, create a directory with the same name as the parent page: pages/group-foo/.

---

Also, see these official documents:

• Nested Routes
• Dynamic Nested Routes
• API: The Component