support the use of slot in layout files

dohomi
1.4k
dohomi
commented 3 years ago

Hello,

it would be nice if slot areas would assignable in layout files. Often parts of the pages need to be rendered inside of the top toolbar. Thanks

2
Atinux
30.8k
Atinux
commented 3 years ago

Can you provide an example of what you are trying to do @dohomi ?

0
dohomi
1.4k
dohomi
commented 3 years ago

Hello @Atinux here a simple example to get content into the toolbar and content section of an app

index.vue

<template>
  <div>
    <div slot="toolbar">
      <h2 class="md-title">Welcome to index</h2>
    </div>
    <div slot="content">
      <p>her comes the content...</p>
    </div>
 </div>
</template>

default_layout.vue

<template>
<div>
<header>
  <slot name="toolbar"></slot>
</header>
<content>
  <slot name="content"></slot>
</content>
</div>
</template>

Currently I do this through a custom component and leave the layout file with just the <nuxt/> almost empty.

0
Atinux
30.8k
Atinux
commented 3 years ago

Hi @dohomi

It's not possible with layouts logic of nuxt.js since it's based on vue-router.

But nothing is impossible with vue.js 😄

You can create a layout folder (without the s) for example where you can create your layouts with slots.

layout/default.vue

<template>
  <div>
    <header>
      <slot name="toolbar"></slot>
    </header>
    <content>
      <slot name="content"></slot>
    </content>
  </div>
</template>

And then, in your pages, you can can import the layout (we use it as <page>) and use the slots:

<template>
  <page>
    <div slot="toolbar">
      <h2 class="md-title">Welcome to index</h2>
    </div>
    <div slot="content">
      <p>her comes the content...</p>
    </div>
 </page>
</template>

<script>
import page from '~/layout/default'

export default {
  components: { page }
}
</script>
2
dohomi
1.4k
dohomi
commented 3 years ago

Hi @Atinux thats how I am doing it right now. Thanks for the example and good to know that I did it in the right way.

0
dohomi
1.4k
dohomi
commented 3 years ago

Hi @Atinux @alexchopin is it somehow possible to use router-view feature of vue-router? In my current setup I would love to render the toolbar directly from page into a separate section of the layout. Similiar approach like above, but currently with using a component for layout the render of specific fields of my layout are rendered again.
Thanks for heads up

0
dohomi
1.4k
dohomi
commented 3 years ago

never mind… I got it working with tweaking the css and now the structure respects. Still there might be some workflows where router-view support would be beneficial for the developers.

0
Etheryte
85
Etheryte
commented 3 years ago

vue-router supports named views out of the box, it's very unclear why Nuxt is limiting the usage as it is. Named views and/or slots offer a much more diverse approach to composition and there's no reason to support them only through workarounds.
From vue-router docs:

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})
17
easherma
0
easherma
commented 2 years ago

Any updates on this with current/forthcoming versions?

0
Atinux
30.8k
Atinux
commented 2 years ago

We will work on it, after long thoughts I don’t think layouts was a great idea but instead rely on a App.vue

0
redijedi
0
redijedi
commented 2 years ago

Any update on this? I've found the lack of slots really hard to work around. I often need to change the contents of a default toolbar in the layout depending on certain pages' actions needs. I've been bending over backwards to try to handle this. Vue slots were so easy to use and would be great to have again.

0
xxRockOnxx
0
xxRockOnxx
commented a year ago

I need this one too. Aside from what @Atinux suggested, is it possible to programatically or suggested to programatically inject a component to layout's component?

Same use case as the others which is modifying a toolbar's contents.

0
xxRockOnxx
0
xxRockOnxx
commented a year ago

I'm not sure if this is possible, but what if nuxt kind of do something like this behind the scene?

<template>
    <default-layout>
        // actual contents of your page/*.vue
    </default-layout>
</template>

so that the slots in the layout is accessible within page components?

0
dylanmcgowan
3
dylanmcgowan
commented a year ago

To complete the trifecta of cartoon network avatars +1 for layout slots!

0
geocine
0
geocine
commented a year ago

I hope this issue could be reopened

0
sobolevn
11
sobolevn
commented a year ago

Very sad that this is not supported.

0
nelsonlarocca
0
nelsonlarocca
commented 9 months ago

Hi guys !

Any update about this ?
I would like to add an extension toolbar containing some icons, each one linked to a different function defined anywhere depending on each page's content
Top toolbar on default layout, extension defined on each page.

Graphically it would be seen as:

FIXED (app) Toolbar having common links to all pages
Extension holding some icons

both "app", I mean, no-scrollable, fixed on top

Any other way to implement that ? I'm trying to get off that idea but seems not to be easy

Thanks !

0
cain98
50
cain98
commented 9 months ago

Would love to see this!

0
ngunyimacharia
0
ngunyimacharia
commented 9 months ago

Any update on this? Would love to see it implemented!

0
connecteev
0
connecteev
commented 9 months ago

+1 can we get this feature, please? +1 for layout slots. I hope someone is reading this, otherwise I'll open a new ticket and reference this.

PS. Not sure if Nuxt has changed significantly from 2017 when this comment was made:
https://github.com/nuxt/nuxt.js/issues/1079

0
iliyaZelenko
0
iliyaZelenko
commented 8 months ago

Portal-vue helps me.

layouts/default.vue

<template>
  <div>
    My header

    <PortalTarget name="under-header" />

    <nuxt />
  </div>
</template>

pages/index.vue

<template>
  <div>
    <Portal to="under-header">
      My under header
    </Portal>

    My body
  </div>
</template>

It works for me.

0
douira
5
douira
commented 8 months ago

That seems like a possibility but not a very nice one structurally… But for small changes, it's just fine. You might not want to use too many of those portals though, it might get confusing otherwise.
My solution is to use a base layout that I extend with other layouts. Then I can specify a different layout when I need it to be slightly different. This approach doesn't work if you need to tightly integrate the slot content with the rest of the page though. (and you can't or don't want to use vuex)

0
dhritzkiv
0
dhritzkiv
commented 6 months ago

portal-vue looks promising, but the lack of SSR support is a non-starter for me.

FWIW, it appears that Vue.js v3 will have portals as a first-class feature: https://github.com/vuejs/vue-next/blob/62a1bcbab0ebea513bb417d9f1485e64b36a6f5a/README.md

0
connecteev
0
connecteev
commented 6 months ago

+1 for slots in layout files so we can get SSR support

0
douira
5
douira
commented 4 months ago

@ the stale bot, this is a feature request so there isn't much to say about that.

0
connecteev
0
connecteev
commented 3 months ago

@ stale bot: please keep this open…pretty please?

0
Informations
QuestionUnresolved
#c162 - Created 3 years ago