@ulu/unplugin-vue-router-frontmatter
v0.0.2
Published
Pull frontmatter from pages that are markdown and add to route.meta. Use in extendRoute() method of unplugin-vue-router.
Downloads
4
Maintainers
Readme
@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.