Vite's Vue-Router's meta-information layout system
English | Chinese
A rewritten version of
vite-plugin-vue-layouts
with a reasonable HMR
in the latest version of 'Vite' !!
npm i vite-plugin-vue-meta-layouts -D
// vite.config.js
import { defineConfig } from "vite"
import Vue from "@vitejs/plugin-vue"
import MetaLayouts from "vite-plugin-vue-meta-layouts"
export default defineConfig({
plugins: [Vue(), MetaLayouts()],
})
import { setupLayouts } from "virtual:meta-layouts"
import { createRouter, createWebHistory } from "vue-router"
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])
Of course, file routing is also supported 🤗
npm i vite-plugin-pages -D
// vite.config.js
import { defineConfig } from "vite"
import Vue from "@vitejs/plugin-vue"
import Pages from "vite-plugin-pages" // Introducing the file routing plugin
import MetaLayouts from "vite-plugin-vue-meta-layouts"
export default defineConfig({
plugins: [
Vue(),
Pages(), // Configure the configuration file routing plug-in
MetaLayouts(),
],
})
import fileRoutes from "~pages" // file routes
import { setupLayouts } from "virtual:meta-layouts"
import { createRouter, createWebHistory } from "vue-router"
const router = createRouter({
routes: setupLayouts(fileRoutes), // Register the file routes
history: createWebHistory(),
})
At this time, the layout can be configured by meta
of the custom block route
in the page
<!-- Your page -->
<template> content </template>
<route> { meta: { layout: 'other' } } </route>
npm i unplugin-vue-router -D
import { routes } from "vue-router/auto-routes" // file routes
import { setupLayouts } from "virtual:meta-layouts"
import { createRouter, createWebHistory } from "vue-router"
const router = createRouter({
extendRoutes: () => setupLayouts(routes), // Register the file routes
history: createWebHistory(),
})
// vite.config.js
import { defineConfig } from "vite"
import Vue from "@vitejs/plugin-vue"
import MetaLayouts from "vite-plugin-vue-meta-layouts"
export default defineConfig({
plugins: [
Vue(),
MetaLayouts({
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
}),
],
})
If you are a ts
project, you can also configure the following declaration in
tsconfig.json
{
"compilerOptions": {
"types": ["vite-plugin-vue-meta-layouts/client"]
}
}
Use volar-plugin-vue-router can bring friendly code hints.
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:meta-layouts"
const getRoutes = createGetRoutes(router)
// Gets the route table, but does not contain layout routes
console.log(getRoutes())
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.
Made with markthree
Published under MIT License.