feat: allow vue pages to provide named slots to layouts (close #106)

[ElMassimo]

Description 📖

This pull request enables Vue pages to provide named slots to layouts using the standard syntax.

Layouts have had this ability since https://github.com/ElMassimo/iles/pull/3.

Notes ✏️

This feature is syntax sugar, as this is already possible by using layouts explicitly as components in pages:

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

Implementation 1

Rewriting page templates to be wrapped with layouts before Vue compiles them.

Layout

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

Page

<template>
  <template #header>I'm on the header!</template>
  I'm on the main section!
</template>

would be transformed by the plugin to:

<template>
  <DefaultLayout>
    <template #header>I'm on the header!</template>
    I'm on the main section!
  </DefaultLayout>
</template>

Downsides

• It removes the ability to render the content of Vue pages using useDocuments:
  • The current implementation rewrites the page template to wrap it explicitly with the layout
• It fails the valid-v-slot lint rule:
  • 'v-slot' directive must be owned by a custom element, but 'template' is not

Alternatives

Renderless components

This could be implemented using provide/inject or Teleport.

The problem is that both of these options don't play nicely with SSR, given reactivity is disabled.

Layout

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

Page

<template>
  <LayoutContent slot="header">I'm on the header!</LayoutContent>
  I'm on the main section!
</template>

[nx-cloud[bot]]

☁️ Nx Cloud Report

We didn't find any information for the current pull request with the commit 5229eee05f1063963c71144ffe79adbc757299e8. You might need to set the 'NX_BRANCH' environment variable in your CI pipeline.

Check the Nx Cloud Github Integration documentation for more information.

---

Sent with 💌 from NxCloud.

[ElMassimo]

Dropping this idea for now, see https://github.com/ElMassimo/iles/issues/106#issuecomment-1083269826.