Vite

セットアップ

このプラグインは React Router、TanStack Start、Waku などの Vite アプリで動作します。Next.js については専用のセットアップ手順を参照してください。Astro では Fumadocs MDX を使用せず、@fumadocs/astro と Astro 独自のコンテンツコレクションを組み合わせて使用します。

インストール

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