Vite

設定

此外掛適用於 React Router、TanStack Start、Waku 及其他 Vite 應用程式。Next.js 有專屬的設定方式。Astro 則是搭配 @fumadocs/astro 使用 Astro 本身的內容集合，而非 Fumadocs MDX。

安裝

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

加入 Vite 外掛：

vite.config.ts

import { defineConfig } from 'vite';
import { reactRouter } from '@react-router/dev/vite';
import { fumadocsMdx } from 'fumadocs-mdx/vite';

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

與 Fumadocs 整合

建立 lib/source.ts 檔案：

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(),
});