@nhdegnebolig/folio

A Vite-native MDX content layer. Drop .md and .mdx files into your project and query them at runtime — no build step, no codegen, just Vite.

Install

npm install @nhdegnebolig/folio

Setup

// vite.config.ts
import { folio } from '@nhdegnebolig/folio'

export default {
  plugins: [
    folio({
      contentDir: 'content',   // directory with your .md/.mdx files (default: 'content')
      jsxImportSource: 'vue',  // jsx runtime: 'react', 'solid-js', 'vue', etc.
    }),
  ],
}

Virtual modules

After setup, three virtual modules are available anywhere in your app:

// Full content index (paths + frontmatter)
import { index } from 'virtual:folio/index'

// Query functions
import { listContent, getContent } from 'virtual:folio/query'

const allDocs = await listContent('/docs')
const post = await getContent('/blog/my-post')

// Flat list of all paths — useful for SSG route generation
import { routes } from 'virtual:folio/routes'

Content structure

Files mirror routes by default:

content/
  index.mdx          →  /
  docs/
    index.mdx        →  /docs
    getting-started.mdx  →  /docs/getting-started

Override the path with a path field in frontmatter:

---
title: My Post
path: /custom/url
---

License

MIT