Nuxt•3mo 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

NistharOP•3mo ago

This is my directory structure:

NistharOP•3mo ago

NistharOP•3mo ago

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

Patrik•3mo ago

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

Nuxt

· Nuxt Components

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

NistharOP•3mo ago

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

Patrik•3mo ago

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

NistharOP•3mo 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•3mo 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

NistharOP•3mo 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•3mo ago

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

NistharOP•3mo ago

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

joe_black_unlucky•3mo 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

NistharOP•3mo 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•3mo 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

NistharOP•3mo ago

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

joe_black_unlucky•3mo ago

ok anyway, for page titles you add it under the head directive

NistharOP•3mo ago

no i can see that its using the correct layout i specified

joe_black_unlucky•3mo ago

<Head> <Title>My page title</Title> </Head>

NistharOP•3mo ago

no i am trying to set a title deep inside the body html

joe_black_unlucky•3mo ago

you can set the title on any page and use a reference use a pinia store if it's nested deep

Cue•3mo ago

Or just use definePageMeta({ pageTitle: '...' }) in your page and $route.meta.pageTitle in your nested component?

Patrik•3mo ago

<template>
  <NuxtLayout name="name layout">
    
      <template #header>
        Page title
      </template>
      <template #content>
        dfsdf
      </template>
   
  </NuxtLayout>
</template>

<template>
  <NuxtLayout name="name layout">
    
      <template #header>
        Page title
      </template>
      <template #content>
        dfsdf
      </template>
   
  </NuxtLayout>
</template>

Like that

NistharOP•3mo ago

Yes i know you can do this inside nuxt-layout. But i was looking to do this from child pages like i said in the question. I think we can conclude that this is not possible to do in nuxt

joe_black_unlucky•3mo ago

Child pages or components? yes from components you would need to bubble up an event if you are not using pinia. With pinia it's super easy, set the pinia store value in the child component and use that pinia store value in your layout page or wherever

NistharOP•3mo ago

It looks like you haven't understood what i am trying to do. You can refer my original question in the top.

joe_black_unlucky•3mo ago

Yeah you right, im still on setting the page title meta tags, you can use teleport to teleport content or components to this header template, is one way https://nuxt.com/docs/api/components/teleports

Nuxt

· Nuxt Components

The component teleports a component to a different location in the DOM.

Patrik•3mo ago

It's inside page... No we cannot cause u still doesn't understand stuff U use slots inside layout but u need to define them first This inside layout

<slot name="content" />

<slot name="content" />

NistharOP•3mo ago

you guys haven't read my question properly i think. yeah i am using <slot name="title" /> inside the layout.

joe_black_unlucky•3mo ago

There's many ways to skin this cat @Nisthar maybe you can explain your use case, i'm sure there is a simpler way of solving your problem I think your question doesn't clearly state what you want to do, and you havent included the layout file so we are just going on assumptions. template slots can only by targeted within the tag of said component, so either you create header and content slots for each dashboard page and pass the layout slots all the way down or we dont know what you want to do. Here some code that might help

  <!-- Pass on any defined slots to component-->
    <template
      v-for="(_, name) in $slots"
      #[name]="slotData"
    >
      <slot
        :name="name"
        v-bind="slotData"
      />
    </template>

  <!-- Pass on any defined slots to component-->
    <template
      v-for="(_, name) in $slots"
      #[name]="slotData"
    >
      <slot
        :name="name"
        v-bind="slotData"
      />
    </template>

Patrik•3mo ago

u start raging me...

How do i use these slots inside the dashboard pages?

How do i use these slots inside the dashboard pages?

How do i use these slots inside the dashboard pages?

How do i use these slots inside the dashboard pages?

How do i use these slots inside the dashboard pages?

How do i use these slots inside the dashboard pages?

How do i use these slots inside the dashboard pages?

How do i use these slots inside the dashboard pages?

that was ur question . and this how u use them inside page its not layout its component inside ur page which define what layout u a using inside page read docs man, thats a simple thing u just need to read if thats not what a u looking for then make u question properly

Cue•3mo ago

@Nisthar please provide a simple repro to exhibit what you're trying to achieve by showing what you have tried so others can establish the facts. Since it's very clear nobody seems to understand your issue, perhaps you will need to expand or provide the repro aforementioned. FYI you cannot provide slot content other than parent > child. @Patrik if someone or something is infuriating you, please avoid engaging in the thread, or take a break. It makes for better reading for others.

NistharOP•3mo ago

Sure. sry for that . i added a simple repo to show the issue clearly https://github.com/Nisthar/layout-named-slots

GitHub

GitHub - Nisthar/layout-named-slots: nuxt repo for issue reproduction

nuxt repo for issue reproduction. Contribute to Nisthar/layout-named-slots development by creating an account on GitHub.

NistharOP•3mo ago

Hopefully its clearer now Yeah i think its not possible to do this currently but it would have been really good if it was possible.

Patrik•3mo ago

He said repro idk how i can push code for you give me access to repo @Nisthar melasculla nickname on github im new to github

NistharOP•3mo ago

you can clone the repo and make your own copy on the local changing the repo directly is not good for others

Patrik•3mo ago

i dont wanna to create own repo just to show u how it works u can give access only for me and then remove it or even remove the whole repo if u wanna know how it works I mean I aldy cloned it, and all works I even make 2 options for u I can send u zip if u don't wanna give access I can create new branch if u don't want me to affect initial code

joe_black_unlucky•3mo ago

@Patrik please can you add it to a stackblitz for future reference fork it in github to your own account and then open it in stackblitz, it connects to your github account

Patrik•3mo ago

((( that man should have a reproduction in the first place

Patrik•3mo ago

https://stackblitz.com/edit/github-pyoxhp?file=pages%2Fdashboard%2Findex.vue @Nisthar

Patrik

StackBlitz

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

NistharOP•3mo ago

wdym by reproduction?

Patrik•3mo ago

cuebit have send u link u didnt seen it...

Patrik•3mo ago

https://nuxt.new/

Nuxt.new

Start a new Nuxt project

Patrik•3mo ago

check this out and u understand all works as u wished

NistharOP•3mo ago

so you wanted stackblitz/codesandbox, is that it?

Patrik•3mo ago

i dont wanted it, thats how people show their issues if they cant explain issue

NistharOP•3mo ago

alright, i didn't know you wanted stackblitz/codesandbox, i usually make git repo

Patrik•3mo ago

u knew u just didnt read just check link

NistharOP•3mo ago

Why are you so angry dude?

Patrik•3mo ago

cause u say we didnt understand ur question like 1000 times when actually it was u who cant understand what a we trying to help u

NistharOP•3mo ago

I am not looking for an alternative like this. The point of the issue is not to repeat code in all the pages. I understood the code you were providing and its not what i am looking for.

Patrik•3mo ago

okay then say what u want because i answered your question How do i use these slots inside the dashboard pages? u wanna same title on all dashboard pages?

NistharOP•3mo ago

Did you look my directory structure as well? The question was basically how do i use these slots inside the dashboard pages that i have. I know your code works but i am not looking to repeat the code by using nuxtlayout in multiple pages.

Patrik•3mo ago

man please i wanna help just say what u want its not necessarily layout just what is your goal same title on dashboard pages? thats it? thats only way to use slots of layout u need to use NuxtLayout component on every page to have access slots in layout

NistharOP•3mo ago

as cuebit said, i think maybe you should take a break.

Patrik•3mo ago

...

NistharOP•3mo ago

I am sorry dude. But i don't think you are helping like this

joe_black_unlucky•3mo ago

wow, how ungrateful, at this point i would just move on. But I want to suggest one last thing, if you could be more specific in what you want to achieve as in an actual use case then we can help you with an actual solution. Your example of changing the title can be done much simpler, but clearly you dont want a title change but a component in there, in that case you can just compare the router path and change visibility in your dashboard for that. Why do people always want to force their square peg into a round hole if there are so many other ways of solving the same problem, but no you want the square peg in the round hole and screw all other suggestions. I'm out...

Cue•3mo ago

I think is safe to say the help being requested and the help being offered is not being seen eye to eye. @Nisthar I would suggest you try Vue discord to seek further advice if you feel the help offered here does not suffice. Slots are not exclusive to Nuxt. Best of luck.

NistharOP•2mo ago

@cuebit Did you look through the code? What did you understand from the question? @joe_black_unlucky if I want to use pinia store, some other layout engine or props to achieve what I am trying to do, I wouldn't have asked this question right? @Patrik have given me an alternative that works but I am not looking for a solution using NuxtLayout inside the pages as I said. I have already given the directory structure, a similar question asked before, if you still haven't understood the question, you could have asked me. I have already made it clear what I am trying to do. The use case is not repeating the same layout code for all the sub pages and being able to change it from a single place. also this is incorrect.

Gaming

Programming

How to use layouts (using named slots)?