Fumadocs

Vite

Use Fumadocs MDX with Vite

Setup

Installation

npm i fumadocs-mdx fumadocs-core @types/mdx

Add the Vite plugin:

vite.config.ts
import { defineConfig } from 'vite';
import { fumadocsMdx } from 'fumadocs-mdx/vite';

export default defineConfig({
  plugins: [
    fumadocsMdx(),
    // ...
  ],
});

Integrate with Fumadocs

Create a lib/source.ts file:

app/lib/source.ts
import { defineDocs } from 'fumadocs-mdx/macro';
import { loader } from 'fumadocs-core/source';

const docs = defineDocs({
  dir: 'content/docs',
});

export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
});

Done

You can now write content in content/docs folder.

What is Next?

How is this guide?

Last updated on

On this page