vite-plugin-prerenderer

1.0.1 verified Mon Apr 27 auth: no javascript

A Vite plugin for prerendering applications to static HTML using Puppeteer, targeting improved SEO and faster initial page loads. Version 1.0.1 is the current stable release with no recent updates. It supports any framework (Vue, React, Svelte, etc.) and allows configuration of routes and per-route metadata like title, keywords, and description. Unlike other prerender solutions, it runs headless Chrome via Puppeteer and integrates directly into the Vite build pipeline. The plugin is lightweight but lacks TypeScript definitions and has limited documentation.

Common errors

error Error: Failed to launch the browser process! Puppeteer v22.1.0 ↓

cause Puppeteer not installed or Chrome executable not found.

fix

Run npx puppeteer browsers install chrome or install puppeteer with npm install puppeteer.

error TypeError: vitePluginPrerenderer is not a function ↓

cause Plugin imported incorrectly (e.g., named import instead of default).

fix

Use: import vitePluginPrerenderer from 'vite-plugin-prerenderer'

error ReferenceError: require is not defined in ES module scope ↓

cause Using require() in an ESM project.

fix

Switch to import vitePluginPrerenderer from 'vite-plugin-prerenderer'

error Error: The route '/' is not defined in options. ↓

cause Options object does not have a key for a route listed in routes array.

fix

Ensure all routes have an entry in options if you provide options; or omit options entirely if not needed.

Warnings

gotcha Puppeteer must be installed separately or you will get a runtime error. ↓

fix Install puppeteer as a dev dependency: `npm install puppeteer -D`.

breaking Plugin uses Puppeteer under the hood; it may fail in serverless or CI environments without headless Chrome. ↓

fix Use puppeteer-core with a pre-installed Chrome binary, or run in an environment with Chrome available.

deprecated The plugin's configuration does not allow customizing Puppeteer launch options (e.g., headless mode, args). ↓

fix None, as the plugin does not expose this.

Install

npm install vite-plugin-prerenderer

yarn add vite-plugin-prerenderer

pnpm add vite-plugin-prerenderer

Imports

vitePluginPrerenderer

wrong

const vitePluginPrerenderer = require('vite-plugin-prerenderer')

correct

import vitePluginPrerenderer from 'vite-plugin-prerenderer'

Default export, ESM only (no CommonJS export)

default

wrong

import { default } from 'vite-plugin-prerenderer'

correct

import vitePluginPrerenderer from 'vite-plugin-prerenderer'

Use default import syntax, not named import

Config
```
import type { Config } from 'vite-plugin-prerenderer'
```
TypeScript users can import Config type (if available, but plugin has no types)

Quickstart

Shows basic setup: import plugin, configure routes with optional per-route metadata.

// vite.config.js
import { defineConfig } from 'vite';
import vitePluginPrerenderer from 'vite-plugin-prerenderer';

export default defineConfig({
  plugins: [
    vitePluginPrerenderer({
      routes: ['/', '/about', '/contact'],
      options: {
        '/': { title: 'Home', keyWords: ['vite', 'prerender'], description: 'Home page' },
        '/about': { title: 'About', description: 'About us' },
      },
    }),
  ],
});