Waku

Setup

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

Create the configuration file:

source.config.ts

import { defineConfig, defineDocs } from 'fumadocs-mdx/config';

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

export default defineConfig();

Add the Vite plugin:

vite.config.ts

import { defineConfig } from 'waku/config';
import mdx from 'fumadocs-mdx/vite';
import * as MdxConfig from './source.config.js';
import tailwindcss from '@tailwindcss/vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  vite: {
    plugins: [tailwindcss(), mdx(MdxConfig), tsconfigPaths()],
  },
});

Integrate with Fumadocs

Create a lib/source.ts file:

src/lib/source.ts

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

The source.generated.ts file will be generated when you run development server or production build.

Done

Have fun!

Examples

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

Setup

Integrate with Fumadocs

Done

Examples

Rendering Pages

On this page