README_EN.md

vite-plugin-vue-meta-layouts

Vite's Vue-Router's meta-information layout system

README 🦉

English | Chinese

动机 🤔

A rewritten version of vite-plugin-vue-layouts with a reasonable HMR in the latest version of 'Vite' !!

usage 🦖

basic

install

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()],
});

usage

import { setupLayouts } from "virtual:meta-layouts";
import { createRouter, createWebHistory } from "vue-router";

const routes = setupLayouts([
  {
    // ... Page routes
  },
]);

const router = createRouter({
  routes,
  history: createWebHistory(),
});

1. layouts/default.vue 👉 The default layout, which is now applied to the page

<template>
  default
  <router-view />
</template>

2. 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 🤗

vite-plugin-pages

install

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>

unplugin-vue-router

install

npm i unplugin-vue-router -D

usage

import { routes } from "vue-router/auto-routes"; // file routes
import { setupLayouts } from "virtual:meta-layouts";
import { createRouter, createWebHistory } from "vue-router/auto";

const router = createRouter({
  routes: setupLayouts(routes), // Register the file routes
  history: createWebHistory(),
});

config

// 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
      excludes: [], // Exclude paths, only accept glob
    }),
  ],
});

Type declarations 🦕

If you are a ts project, you can also configure the following declaration in tsconfig.json

{
  "compilerOptions": {
    "types": ["vite-plugin-vue-meta-layouts/client"]
  }
}

route Code Hints 💡

Use volar-plugin-vue-router can bring friendly code hints.

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:meta-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

Made with markthree

Published under MIT License.