<!--
Sitemap:
- [What is Vocs](/introduction/what-is-vocs): Learn why Vocs exists and when to use it
- [Getting Started](/introduction/getting-started): Install Vocs and create your first documentation site
- [Project Structure](/introduction/project-structure): Overview of the structure of a Vocs project
- [Writing Docs with AI](/introduction/writing-docs-with-ai): Use an AI agent to create and maintain Vocs documentation
- [Markdown Extensions](/writing/markdown-extensions): Features and syntax of Markdown in Vocs
- [Code & Syntax Highlighting](/writing/syntax-highlighting): Rich markup and annotations for code
- [Twoslash](/writing/twoslash): Add type-aware annotations to code examples
- [Code Snippets](/writing/code-snippets): Include and reuse code in Markdown
- [Markdown Snippets](/writing/markdown-snippets): Include other Markdown files in MDX
- [React in Markdown](/writing/react): Compose MDX pages with React components
- [Mermaid Diagrams](/writing/mermaid): Render diagrams from text using Mermaid
- [Assets](/writing/assets): Manage images, fonts, icons, and other docs assets
- [Frontmatter](/writing/frontmatter): Configure page metadata, layouts, search, and UI visibility
- [Navigation](/features/navigation): Keep docs navigation synced with routes
- [Search](/features/search): Built-in client-side search powered by MiniSearch
- [Layouts](/features/layouts): Choose and customize page shells for your docs
- [Slots](/features/slots): Inject custom components into the docs shell
- [Theming](/features/theming): Customize colors, typography, spacing, logos, and code themes
- [Tailwind CSS](/features/tailwind): Use Tailwind utilities in Vocs pages and components
- [Dynamic OG Images](/features/dynamic-og-images): Generate social preview images from page metadata
- [Page Feedback](/features/feedback): Collect page-level feedback from readers
- [Redirects](/features/redirects): Preserve old URLs and route legacy paths to new locations
- [API Routes](/features/api-routes): Add server-rendered endpoints to your docs site
- [Agent Support](/features/agent-support): Serve documentation in machine-readable form for AI agents
- [Ask AI](/features/ask-ai): Built-in AI assistant menu on every page
- [MCP Server](/features/mcp-server): Expose your docs and source code to AI assistants
- [Changelog Generation](/features/changelog-generation): Fetch release notes and render a changelog page
- [Rehype & Remark](/features/rehype-and-remark): Customize the Markdown and HTML pipeline
- [Vite](/features/vite): Customize the Vite config that powers Vocs
- [Site Configuration](/reference/site-config): Reference for options accepted by defineConfig
- [Frontmatter Reference](/reference/frontmatter): All frontmatter fields accepted by a Vocs MDX page
- [Components](/reference/components): Reference for the public React components exported from Vocs
- [Hooks](/reference/hooks): Reference for the React hooks exported from Vocs
- [Changelog](/changelog): Release history for Vocs
-->

# Vite \[Customize the Vite config that powers Vocs]

Vocs uses Vite under the hood. Most projects can use Vocs without a `vite.config.ts`, but you can switch to Vite directly when you need Vite-level control such as aliases, dev server options, build options, or extra plugins.

The `vocs` CLI creates its own internal Vite config and does not load `vite.config.ts`. Keep site content, navigation, redirects, search, and theme options in `vocs.config.ts`. Use `vite.config.ts` for Vite behavior.

## Quick Prompt

Ask your AI agent to add a Vite config to your Vocs project:

```txt
Read https://vocs.dev/features/vite and configure Vite for my Vocs project.
```

## Steps

::::steps

### Create Vite Config

Create `vite.config.ts` at the project root and add the React and Vocs Vite plugins.

```ts [vite.config.ts]
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { vocs } from 'vocs/vite'

export default defineConfig({
  plugins: [react(), vocs()]
})
```

:::note

The `vocs` CLI adds `@vitejs/plugin-react` internally. When you run Vite directly, add it to your custom Vite config. Projects created with `create-vocs` already include this dependency.

Vocs still reads `vocs.config.ts` for docs-specific configuration. The Vite config controls the Vite server and build pipeline.

:::

### Switch package.json Scripts

Switch your scripts from `vocs` to `vite` so Vite loads your `vite.config.ts`. If your scripts already use `vite`, leave them as-is.

```diff [package.json]
{
  "scripts": {
-    "dev": "vocs dev",
-    "build": "vocs build",
-    "preview": "vocs preview"
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
  }
}
```

### Run Dev Server

Start the development server with your package manager.

:::code-group

```bash [npm]
npm run dev
```

```bash [pnpm]
pnpm dev
```

```bash [yarn]
yarn dev
```

```bash [bun]
bun run dev
```

:::

::::

## Add Vite Plugins

Add extra Vite plugins next to `vocs()`.

```ts [vite.config.ts]
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import Inspect from 'vite-plugin-inspect'
import { vocs } from 'vocs/vite'

export default defineConfig({
  plugins: [react(), Inspect(), vocs()]
})
```

Install any plugin you import from `vite.config.ts` in your project.

See also: [Site Configuration](/reference/site-config), [Tailwind CSS](/features/tailwind)