vite-pages-theme-doc

5.0.0 verified Mon Apr 27 auth: no javascript

vite-pages-theme-doc is the official documentation theme for vite-plugin-react-pages, providing a ready-to-use template for building documentation sites with React and Vite. Current version is 5.0.0, released alongside vite-plugin-react-pages v5. It features built-in navigation, sidebar, search, and code highlighting. Differentiates from generic doc tools by tight integration with Vite's HMR and plugin ecosystem, and is optimized for React documentation projects. Ships TypeScript types. Development is active with updates tied to the vite-plugin-react-pages lifecycle.

Common errors

error Cannot find module 'vite-pages-theme-doc' or its corresponding type declarations. ↓

cause Missing installation or incorrect import path.

fix

Run npm install vite-pages-theme-doc and ensure it's in package.json dependencye.

error Module '"vite-pages-theme-doc"' has no exported member 'DocTheme'. ↓

cause Using named import instead of default import.

fix

Change to 'import DocTheme from 'vite-pages-theme-doc''.

error Cannot read properties of undefined (reading 'theme') ↓

cause Theme not properly passed in Vite config plugin.

fix

Ensure the theme is imported and passed to the config: theme: DocTheme.

error ENOENT: no such file or directory, open '.../pages/index.page.tsx' ↓

cause Missing page file or incorrect file extension.

fix

Create a page file with .page.tsx extension in the pages directory.

Warnings

breaking v5 requires vite-plugin-react-pages >=5.0.0, compatibility with older versions is broken. ↓

fix Upgrade vite-plugin-react-pages to 5.x.

breaking Theme exports restructured in v5; imports from root may not work. Use client subpath for browser code. ↓

fix Import types and hooks from 'vite-pages-theme-doc/client'.

deprecated Layout customization via basicLayout prop is deprecated in v5; use theme slot system instead. ↓

fix Replace basicLayout with slot components from 'vite-pages-theme-doc/client'.

gotcha Theme expects React 18+; React 17 may cause runtime errors with hooks. ↓

fix Ensure React and react-dom versions are 18 or higher.

gotcha The theme requires a specific file structure (e.g., .page.tsx) for routing; non-standard pages may not be recognized. ↓

fix Follow the documented page file naming convention (e.g., pages/foo/bar.page.tsx).

Install

npm install vite-pages-theme-doc

yarn add vite-pages-theme-doc

pnpm add vite-pages-theme-doc

Imports

default

wrong

import { DocTheme } from 'vite-pages-theme-doc'

correct

import DocTheme from 'vite-pages-theme-doc'

The theme is a default export; named imports will fail.

ThemeConfig type

wrong

import { ThemeConfig } from 'vite-pages-theme-doc'

correct

import type { ThemeConfig } from 'vite-pages-theme-doc/client'

Type imports should be from the client subpath to avoid bundling server code.

useThemeConfig hook
wrong
```
import useThemeConfig from 'vite-pages-theme-doc'
```
correct
```
import { useThemeConfig } from 'vite-pages-theme-doc/client'
```
useThemeConfig is a named export from the client entry; default import will be undefined.

Quickstart

Shows installation, Vite config with theme, and basic page setup for a documentation site.

// Install dependencies
npm install vite-plugin-react-pages react react-dom vite-pages-theme-doc

// vite.config.ts
import { defineConfig } from 'vite';
import reactPages from 'vite-plugin-react-pages';
import DocTheme from 'vite-pages-theme-doc';

export default defineConfig({
  plugins: [
    reactPages({
      theme: DocTheme,
      // additional config...
    }),
  ],
});

// pages/index.page.tsx
export default function Home() {
  return <h1>Home</h1>;
}

// pages/guide/quick-start.page.tsx
export default function QuickStart() {
  return <div>Guide content</div>;
}

// Run with: npx vite