vite-plugin-slots-layouts

Slots-based layout for Vue 3 applications using Vite. WIP

English | 简体中文

Installation

pnpm i -D vite-plugin-slots-layouts

Usage

// vite.config.ts
import { defineConfig } from "vite";
import Layout from "vite-plugin-slots-layouts";

export default defineConfig({
  plugins: [Layout()],
});

In main.ts, import the generated code and call app.use()

// main.ts
import App from "./App.vue";
import layouts from "virtual:slots-layouts";
const app = createApp(App);

app.use(layouts);

Client Types

/// <reference types="vite-plugin-slots-layouts/client" />

Configuration

see types.ts

Layout Block

Use layout-block to set the layout configuration of the page

<layout name="blog" disabled lang="jsonc">
{
  ":isPost": false,
  "v-bind": "obj",
  "@change": "handleLayoutChange"
}
</layout>

props

• name: set layout
• disabled: disabled layout

content

The content is JSON string, you can use the template syntax supported by Vue.

<layout-blog
  :isPost="false"
  v-bind="obj"
  @change="handleLayoutChange"
></layout-blog>

How it works

Registration layout dirs components

• blog/index.vue
  • component: <layout-blog/>
  • layout: blog
• blog/header-and-footer.vue
  • component: <layout-blog-header-and-footer/>
  • layout: blogHeaderAndFooter

Read pages layout-block

<layout name="blog"></layout>

Replace page template with wapper layout component

Before:

<!-- default.vue -->
<template>
  <slot />
  <slot name="footer"> default footer </slot>
</template>

<!-- page.vue -->
<template>page</template>
<template #footer>footer</template>
<script lang="ts" setup>
  ...
</script>

After:

<template>
  <layout-default>
    <template #default>page</template>
    <template #footer>footer</template>
  </layout-default>
</template>
<script lang="ts" setup>
  ...
</script>

That means you have the full flexibility of the slots API at your disposal.