#How to use layouts (using named slots)?

117 messages · Page 1 of 1 (latest)

ionic quiver
#

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>

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>

This is pages/dashboard.vue page:

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

This is my directory structure:

timid atlas
ionic quiver
#

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

timid atlas
#

So answer on the page

#

Where u wanna use title?

#

In script or just on template

ionic quiver
#

My pages are pages/dashboard/index.vue, pages/dashboard/settings.vue

#

I set layout in the parent page pages/dashboard.vue:

ionic quiver
#

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

misty pier
#

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

ionic quiver
misty pier
#

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

ionic quiver
misty pier
#

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

ionic quiver
#

all i have to do is to include <NuxtPage /> inside the dashboard.vue page

ionic quiver
misty pier
#

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

ionic quiver
misty pier
#

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

ionic quiver
misty pier
#

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

ionic quiver
#

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

misty pier
#

you can set the title on any page and use a reference

#

use a pinia store if it's nested deep

dull tiger
#

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

timid atlas
#

Like that

ionic quiver
misty pier
#

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

ionic quiver
#

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

misty pier
timid atlas
timid atlas
#

U use slots inside layout but u need to define them first

#

This inside layout

<slot name="content" />
ionic quiver
misty pier
#

There's many ways to skin this cat @ionic quiver 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>
timid atlas
#

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

timid atlas
timid atlas
#

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

dull tiger
#

@ionic quiver 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.

@timid atlas if someone or something is infuriating you, please avoid engaging in the thread, or take a break. It makes for better reading for others.

ionic quiver
#

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.

timid atlas
#

He said repro

timid atlas
#

idk how i can push code for you give me access to repo

#

@ionic quiver

#

melasculla nickname on github

#

im new to github

ionic quiver
#

changing the repo directly is not good for others

timid atlas
#

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

timid atlas
#

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

misty pier
#

@timid atlas 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

timid atlas
#

(((

#

that man should have a reproduction in the first place

ionic quiver
timid atlas
#

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

timid atlas
#

all works as u wished

ionic quiver
timid atlas
#

i dont wanted it, thats how people show their issues

#

if they cant explain issue

ionic quiver
#

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

timid atlas
#

u just didnt read

timid atlas
ionic quiver
#

Why are you so angry dude?

timid atlas
#

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

ionic quiver
ionic quiver
timid atlas
#

u wanna same title on all dashboard pages?

ionic quiver
#

I know your code works but i am not looking to repeat the code by using nuxtlayout in multiple pages.

timid atlas
#

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?

timid atlas
#

u need to use NuxtLayout component on every page to have access slots in layout

ionic quiver
timid atlas
#

...

ionic quiver
#

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

misty pier
#

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

dull tiger
#

I think is safe to say the help being requested and the help being offered is not being seen eye to eye.

@ionic quiver 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.

ionic quiver
#

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.

ionic quiver
#

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.