Vite Guide

The renoun toolkit integrates with Vite and React Server Components to provide powerful content and documentation tooling.

The renoun toolkit enhances Vite by providing features like file system utilities, syntax highlighting, and type documentation. This guide covers configuring Vite with React Server Components so you can use renoun components and utilities.

Install

If you don’t already have a Vite project you can create one:

npm create vite@latest

Next, install the required dependencies:

npm install renoun @vitejs/plugin-react @vitejs/plugin-react-rsc @mdx-js/rollup
pnpm add renoun @vitejs/plugin-react @vitejs/plugin-react-rsc @mdx-js/rollup
yarn add renoun @vitejs/plugin-react @vitejs/plugin-react-rsc @mdx-js/rollup
bun add renoun @vitejs/plugin-react @vitejs/plugin-react-rsc @mdx-js/rollup

Setup

Configure the React, React Server Components, and MDX plugins in your vite.config.ts file:

vite.config.ts
import react from '@vitejs/plugin-react'
import rsc from '@vitejs/plugin-react-rsc'
import mdx from '@mdx-js/rollup'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react(), rsc(), mdx()],
})

The MDX plugin allows Vite to import and compile .mdx files so utilities like Directory can load them.

Update the vite scripts in your package.json to ensure the renoun process starts before Vite:

{
  "scripts": {
    "dev": "renoun vite dev",
    "build": "renoun vite build"
  }
}

Using Utilities and Components

With Vite configured you can use renoun utilities to load content. For example, to render an MDX file:

import { Directory } from 'renoun'

const docs = new Directory({
  path: 'docs',
  filter: '*.mdx',
  loader: {
    mdx: (path) => import(`./docs/${path}.mdx`),
  },
})

export default async function Page() {
  const doc = await docs.getFile('getting-started', 'mdx')
  const Content = await doc.getExportValue('default')
  return <Content />
}

Start

Now you can start your Vite server with renoun enabled:

npm run dev
pnpm dev
yarn dev
bun run dev

Congratulations, you’ve successfully set up renoun with Vite! Explore more components and utilities to enhance your documentation.

Last updated