https://github.com/kejunmao/vite-plugin-slots-layouts
Slots-based layout for Vue 3 applications using Vite
https://github.com/kejunmao/vite-plugin-slots-layouts
layouts uniapp uniapp-layouts vite-plugin vue-layout
Last synced: 4 months ago
JSON representation
Slots-based layout for Vue 3 applications using Vite
- Host: GitHub
- URL: https://github.com/kejunmao/vite-plugin-slots-layouts
- Owner: KeJunMao
- License: mit
- Created: 2022-11-06T13:12:36.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-10T07:27:52.000Z (almost 3 years ago)
- Last Synced: 2025-04-22T20:53:28.887Z (6 months ago)
- Topics: layouts, uniapp, uniapp-layouts, vite-plugin, vue-layout
- Language: TypeScript
- Homepage:
- Size: 231 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
vite-plugin-slots-layouts
Slots-based layout for Vue 3 applications using Vite. WIP
English | [简体中文](./README.zhCN.md)
## Installation
```bash
pnpm i -D vite-plugin-slots-layouts
```
## Usage
```ts
// 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()`
```ts
// main.ts
import App from "./App.vue";
import layouts from "virtual:slots-layouts";
const app = createApp(App);
app.use(layouts);
```
## Client Types
```ts
///
```
## Configuration
see [types.ts](./src/types.ts)
## Layout Block
Use layout-block to set the layout configuration of the page
```vue
{
":isPost": false,
"v-bind": "obj",
"@change": "handleLayoutChange"
}
```
### props
- `name`: set layout
- `disabled`: disabled layout
### content
The content is JSON string, you can use the template syntax supported by Vue.
```vue
```
## How it works
Registration layout dirs components
- blog/index.vue
- component: ``
- layout: `blog`
- blog/header-and-footer.vue
- component: ``
- layout: `blogHeaderAndFooter`
Read pages layout-block
```html
```
Replace page template with wapper layout component
Before:
```html
default footer
```
```html
page
footer
...
```
After:
```html
page
footer
...
```
That means you have the full flexibility of the slots API at your disposal.