Nuxt•3w ago

How to use layouts (using named slots)?

I want to use the dashboard-default.vue layout inside all the dashboard pages. In the dashboard-default.vue, there's 2 named slots for header and content. How do i use these slots inside the dashboard pages? I tried this pages/dashboard.vue

<template>
  <div>
    <NuxtLayout name="dashboard-defualt">
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <NuxtLayout name="dashboard-defualt">
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

and inside the pages/dashboard/index.vue:

<template> //error here because you can't use template inside template i think
  <div>
    
      <template #header>
        Page title
      </template>
      <template #content>
        dfsdf
      </template>
   
  </div>
</template>

<template> //error here because you can't use template inside template i think
  <div>
    
      <template #header>
        Page title
      </template>
      <template #content>
        dfsdf
      </template>
   
  </div>
</template>

This is pages/dashboard.vue page:

<template>
  <div>
    <NuxtLayout name="dashboard-defualt">
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <NuxtLayout name="dashboard-defualt">
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

59 Replies

Nisthar•3w ago

This is my directory structure:

Nisthar•3w ago

Nisthar•3w ago

same question https://discord.com/channels/473401852243869706/1246416385823739955

Patrik•3w ago

https://nuxt.com/docs/api/components/nuxt-layout

Nuxt

· Nuxt Components

Nuxt provides the component to show layouts on pages and error pages.

Nisthar•3w ago

Yeah i used that The question is how do i pass title from individual pages to the layout?

Patrik•3w ago

So answer on the page Where u wanna use title? In script or just on template

Nisthar•3w ago

My pages are pages/dashboard/index.vue, pages/dashboard/settings.vue I set layout in the parent page pages/dashboard.vue:

<template>
  <div>
    <NuxtLayout name="dashboard-defualt">
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <NuxtLayout name="dashboard-defualt">
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

the layout accepts one named slot header I want to pass this header from the pages inside pages/dashboard/index.vue, pages/dashboard/settings.vue so that i can set different titles to the layout

joe_black_unlucky•3w ago

you confusing layout and pages folders. In nuxt, your layout goes in the layout folder, RTD Nuxt wont know what to resolve, pages/dashboard/index.vue or pages/dashboard.vue These two create the same route in nuxt's router to www.site.com/dashboard

Nisthar•3w ago

are you saying you can't have both these files at the same time pages/dashboard/index.vue , pages/dashboard.vue ?

joe_black_unlucky•3w ago

no you can't what is going to be used for the route?

Nisthar•3w ago

its working fine for me. I think both are used for the route

joe_black_unlucky•3w ago

if you want different layouts for the site and for the dashboard you need to put those in the layout folder and choose your layout in the pages component

Nisthar•3w ago

all i have to do is to include <NuxtPage /> inside the dashboard.vue page no that's not my original question

joe_black_unlucky•3w ago

do you have a file called layouts/dashboard-defualt.vue nuxt probably tries to render default layouts, and for the index.vue it will take priority over dashboard.vue

Nisthar•3w ago

yes I have a layout layouts/dashboard/default.vue

Gaming

Programming

How to use layouts (using named slots)?