unplugin-vue-layouts
v0.0.1
Published
Router based layout plugin for Vue
Downloads
12
Readme
unplugin-vue-layouts
Usage
Basic
Install
pnpm add -D unplugin-vue-layouts
// vite.config.ts
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import VueLayouts from 'unplugin-vue-layouts';
export default defineConfig({
plugins: [Vue(), VueLayouts()],
});
Usage
import { createRouter, createWebHistory } from 'vue-router';
import { setupLayouts } from 'virtual:vue-layouts';
const routes = setupLayouts([
{
// ... Page routes
},
]);
const router = createRouter({
routes,
history: createWebHistory(),
});
layouts/default.vue
👉 The default layout, which is now applied to the page
<template>
default
<router-view />
</template>
- Of course you can configure different layouts
For example layouts/other.vue
// apply layouts/default.vue layout
const home = {
path: '/',
component: () => import('./pages/home.vue'),
};
// apply layouts/other.vue layout
const about = {
path: '/about',
component: () => import('./pages/home.vue'),
meta: {
layout: 'other', // Manage layouts through meta information
},
};
const routes = setupLayouts([home, about]);
Pair with file routing
Of course, file routing is also supported 🤗
unplugin-vue-router
Install
npm i unplugin-vue-router -D
Usage
import { createRouter, createWebHistory } from 'vue-router/auto';
import { routes } from 'vue-router/auto/routes';
import { setupLayouts } from 'virtual:vue-layouts';
const router = createRouter({
routes: setupLayouts(routes), // Register the file routes
history: createWebHistory(),
});
Config
// vite.config.ts
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import VueLayouts from 'unplugin-vue-layouts';
export default defineConfig({
plugins: [
Vue(),
VueLayouts({
target: 'src/layouts', // Layout directory, default src/layouts
defaultLayout: 'default', // Default layout, which defaults to default
importMode: 'sync', // Load mode, support sync and async. The default is automatic processing, sync for SSGs, and async for non-SSGs
skipTopLevelRouteLayout: true, // Turn on fixing https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134, default is false Close
}),
],
});
Type declarations 🦕
If you are a ts
project, you can also configure the following declaration in
tsconfig.json
{
"compilerOptions": {
"types": ["unplugin-vue-layouts/client"]
}
}
Note
Since the layout system needs to nest a layer of layout routes in the outermost layer, it may cause confusion in obtaining the routing table, and auxiliary functions can be used at this time 👇
import { createGetRoutes } from 'virtual:vue-layouts';
const getRoutes = createGetRoutes(router);
// Gets the route table, but does not contain layout routes
console.log(getRoutes());
Implement 👀
The layout implementation idea comes from [vite-plugin-vue-layouts] (https://github.com/JohnCampionJr/vite-plugin-vue-layouts).
However, the simpler scheme 👉 virtual file and glob import is used.
The program can do reasonable HMR
automatically.
License
Published under MIT License.