0.0.5 • Published 3 years ago
vite-plugin-slots-layouts v0.0.5
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 layoutdisabled
: disabled layout
content
The content is JSON string, you can use the template syntax supported by Vue.
<BlogLayout
:isPost="false"
v-bind="obj"
@change="handleLayoutChange"
></BlogLayout>
How it works
Registration layout dirs components
- blog/index.vue
- component:
<Blog/>
- layout:
blog
- component:
- blog/header-and-footer.vue
- component:
<BlogHeaderAndFooter/>
- layout:
blogHeaderAndFooter
- component:
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>
<DefaultLayout>
<template #default>page</template>
<template #footer>footer</template>
</DefaultLayout>
</template>
<script lang="ts" setup>
...
</script>
That means you have the full flexibility of the slots API at your disposal.