Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add support for layouts with multiple (named) slots

See original GitHub issue

Hi, i would like to use layouts with multiple slots but did not find a way to reference any named slots from within a page.

Example (layout/default.vue):

<template>
    <header>
        <h1>Website</h1>
        <slot name="header" />
    </header>

...

    <main>
        <slot />
    </main>
</template>

Vue pages can only contain a single <template> tag, maybe a custom component that works like like <Head> could be the solution.

Example (pages/index.vue):

<template>
    <SlotContent name="header">
        <h2>Important headline</h2>
    </SlotContent>

    <p>Other content</p>
</template>

Issue Analytics

State:
Created a year ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

ElMassimocommented, Mar 23, 2022

I implemented a proof-of-concept, which enables .vue pages to pass slots to the parent layout using the standard syntax:

<template>
  <template #header>
    <h2>Important headline</h2>
  </template>

  <p>Other content</p>
</template>

The only downside is that it requires an additional SFC parse of .vue pages on each pass so it’s a bit slower (although it’s only a few ms). I’d like to benchmark it in a slower computer before deciding to go ahead with this change.

Please give it a try, and let me know how it goes 😃

0reactions

ElMassimocommented, Mar 30, 2022

Closing for now as I haven’t found any implementation without serious downsides, see #114 for further details.

If you need to provide HTML to layouts, you can use the following pattern:

Layout

src/layouts/default.vue

<template>
  <header><slot name="header">Welcome</slot></header>
  <main><slot/></main>
</template>

Page

Opt-out of the default layout using layout="false", and add an existing layout to the template, passing named slots as usual.

<template layout="false">
  <DefaultLayout>
    <template #header>I'm on the header!</template>
    I'm on the main section!
  </DefaultLayout>
</template>

Have in mind that iles automatically exposes existing layouts using the <${Name}Layout> convention, no need to import them.

It’s not as terse as the proof-of-concept, but it’s not too bad either.