CODEWITHSUNDEEP
layoutvue.jscomponentsnuxt.js
Hai the man
Hai the man

Reputation: 133

Nuxt.js - How to use layout inside layout

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: https://prnt.sc/kl4zkc

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

Upvotes: 10

Views: 8756

Answers (2)

sparkyspider
sparkyspider

Reputation: 13519

If you have a default.vue and a nested.vue and an index.vue and you would like to next index in nested and nested in turn in default, just add a default tag into nested.

nested.vue

<default>
  <p>My content in here</p>
</default>

Upvotes: 0

dyanagi
dyanagi

Reputation: 361

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:

Upvotes: 11

Related Questions