Vite
Waku
Use Fumadocs MDX with Waku
Setup
Install dependencies:
npm i fumadocs-mdx fumadocs-core fumadocs-ui @types/mdx
Create the configuration file:
import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
export const docs = defineDocs({
dir: 'content/docs',
});
export default defineConfig();
Create the content source:
import { loader } from 'fumadocs-core/source';
import { create, docs } from '../source.generated.js';
export const source = loader({
source: await create.sourceAsync(docs.doc, docs.meta),
baseUrl: '/docs',
});
Rendering Pages
Since Waku supports RSC, you can use the exported default
component directly.
import { source } from '@/lib/source';
import type { PageProps } from 'waku/router';
import defaultMdxComponents from 'fumadocs-ui/mdx';
import {
DocsBody,
DocsDescription,
DocsPage,
DocsTitle,
} from 'fumadocs-ui/page';
export default async function DocPage({
slugs,
}: PageProps<'/docs/[...slugs]'>) {
const page = source.getPage(slugs);
if (!page) {
// ...
}
const MDX = page.data.default;
return (
<DocsPage toc={page.data.toc}>
<DocsTitle>{page.data.title}</DocsTitle>
<DocsDescription>{page.data.description}</DocsDescription>
<DocsBody>
<MDX
components={{
...defaultMdxComponents,
}}
/>
</DocsBody>
</DocsPage>
);
}
How is this guide?
Last updated on