# Fumadocs MDX (the built-in content source): Vite
URL: /zh-TW/docs/mdx/vite
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/mdx/(integrations)/vite.zh-TW.mdx

搭配 Vite 使用 Fumadocs MDX

## 設定 [#setup]

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

<div className="fd-steps [&_h3]:fd-step">
  ### 安裝 [#installation]

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

  加入 Vite 外掛：

  ```ts tab="React Router" title="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(), // [!code ++]
      reactRouter(),
    ],
  });
  ```

  ```ts tab="TanStack Start" title="vite.config.ts"
  import { defineConfig } from 'vite';
  import { tanstackStart } from '@tanstack/react-start/plugin/vite';
  import react from '@vitejs/plugin-react';
  import { fumadocsMdx } from 'fumadocs-mdx/vite';

  export default defineConfig({
    plugins: [
      fumadocsMdx(), // [!code ++]
      tanstackStart(),
      react(),
    ],
  });
  ```

  ```ts tab="Waku" title="waku.config.ts"
  import { type Config, defineConfig } from 'waku/config';
  import { fumadocsMdx } from 'fumadocs-mdx/vite';
  import type { UserConfig } from 'vite';

  export default defineConfig({
    vite: {
      plugins: [
        // [!code ++]
        fumadocsMdx(),
      ],
      resolve: {
        tsconfigPaths: true,
      },
    } satisfies UserConfig as Config['vite'],
  });
  ```

  ### 與 Fumadocs 整合 [#integrate-with-fumadocs]

  建立 `lib/source.ts` 檔案：

  ```ts title="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]

  現在您可以在 `content/docs` 資料夾中撰寫內容了。
</div>

## 下一步 [#what-is-next]

<Cards>
<Card title="Macro API" href="/docs/mdx/macro">
使用 `fumadocs-mdx/macro` 在應用程式模組中定義集合。
</Card>

<Card title="Config API" href="/docs/mdx/collections">
在 `source.config.ts` 中定義集合，並透過自動產生的進入點檔案存取內容。
</Card>

<Card title="延遲載入" href="/docs/mdx/async">
遇到效能瓶頸了嗎？您可以試試延遲載入。
</Card>
</Cards>