A Vite plugin for working with folders of markdown content.
A simple solution for building blog and docs sites.
Install the plugin:
pnpm install -D vite-plugin-collections
Add plugin to vite.config.ts
:
import { defineConfig } from 'vite'
import collection from 'vite-plugin-collections'
import * as z from 'zod'
export default defineConfig({
plugins: [
// matches src/posts/*.md
collection({
// use folder src/posts
base: 'posts',
// front matter fields use a Zod schema
fields: z.object({
title: z.string().nonempty(),
banner: z.url(),
summary: z.string().optional(),
date: z.iso.date(),
tags: z.array(z.string()).optional(),
})
})
]
})
[!NOTE] This will add an import alias
#posts
, use that to access the markdown files.
To load the list of markdown files:
import { list } from '#posts'
const posts = await list()
To load a single markdown file:
import { get } from '#posts'
const post = await get(slug)
Types definitions are generated in collections.d.ts
.
Add it to your tsconfig.json
:
"files": [
"collections.d.ts"
]
MIT