@ulu/unplugin-vue-router-frontmatter

@ulu/unplugin-vue-router-frontmatter

Pull frontmatter from pages that are markdown and add to route.meta. Use in extendRoute() method of unplugin-vue-router.

Example Usage in

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueRouter from "unplugin-vue-router/vite";
import markdown from 'unplugin-vue-markdown/vite';
import addFrontmatter from "@ulu/unplugin-vue-router-frontmatter";

export default defineConfig({
  plugins: [
    markdown(),
    vueRouter({
      extensions: [".vue", ".md"],
      extendRoute(route) {
        addFrontmatter(route);
      }
    }),
    vue({
      include: [/\.vue$/, /\.md$/]
    }),
  ],
});

You can also optionally pass a callback to modify the frontmatter that's added

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueRouter from "unplugin-vue-router/vite";
import markdown from 'unplugin-vue-markdown/vite';
import addFrontmatter from "@ulu/unplugin-vue-router-frontmatter";

export default defineConfig({
  plugins: [
    markdown(),
    vueRouter({
      extensions: [".vue", ".md"],
      extendRoute(route) {
        addFrontmatter(route, ({ 
          title, 
          category, 
          order 
        }) => {
          return { title, category, order };
        });
      }
    }),
    vue({
      include: [/\.vue$/, /\.md$/]
    }),
  ],
});

Original Use Case

Used with vite-ssg, unplugin-vue-markdown (frontmatter) and adding it to unplugin-vue-router (route.meta) so that things like menus can be built dynamically (toolkits, guides, etc). And to avoid having to do any of this on the client side. For example grabbing each pages (title, order/weight) and adding it to the route meta in order to base menus on route structure.