vite-plugin-prerender-static

0.1.3 verified Mon Apr 27 auth: no javascript

A lightweight Vite plugin for static prerendering of SPAs to improve SEO. Version 0.1.3 supports Vite 4–7, Node 18+, and multiple routes with built-in SEO meta tag generation (Open Graph, Twitter, JSON-LD). It is framework-agnostic (React, Vue, Svelte, etc.) and requires zero runtime dependencies. Its key differentiator is simplicity: it avoids SSR complexity and provides a drop-in replacement for generating static HTML at build time. The plugin is actively maintained with recent updates and a roadmap for future features like CLI and automatic route discovery.

Common errors

error ERR_IMPORT_DEFAULT: Cannot import default export from non-module ↓

cause Using named import '{ prerenderStatic }' instead of default import.

fix

Change to import prerenderStatic from 'vite-plugin-prerender-static';

error [vite] Internal server error: Cannot find module 'template.html' ↓

cause Missing template.html in project root when template option not set.

fix

Ensure template.html exists or set the template option to an existing file.

error TypeError: route.path is undefined ↓

cause Routes array has an entry without a 'path' property.

fix

Ensure each route object has a 'path' string.

error Error: Route path must start with '/' ↓

cause Path does not start with a forward slash.

fix

Add leading slash, e.g., 'about' -> '/about'.

Warnings

breaking Requires Vite v4 or higher. Older versions are unsupported. ↓

fix Upgrade Vite to ^4 || ^5 || ^6 || ^7.

deprecated The 'tags' option can be a string or object. String format is deprecated in favor of object format. ↓

fix Use object format: tags: { title: '...' }

gotcha If no 'template.html' exists, the plugin auto-generates one. Ensure your project root does not have a conflicting file. ↓

fix Delete or rename any existing template.html if you want auto-generation.

gotcha The plugin only runs during build. It does not work in dev mode. ↓

fix Use Vite's build command, not dev server.

deprecated Using 'render' function is optional; if omitted, a fallback is used. This fallback may not include your actual app content. ↓

fix Always provide a custom render function that generates the HTML for each route.

Install

npm install vite-plugin-prerender-static

yarn add vite-plugin-prerender-static

pnpm add vite-plugin-prerender-static

Imports

prerenderStatic

wrong

import { prerenderStatic } from 'vite-plugin-prerender-static';

correct

import prerenderStatic from 'vite-plugin-prerender-static';

Default export. Named export will cause undefined error.

generateSEOTags

wrong

import { generateSEOTags } from 'vite-plugin-prerender-static';

correct

import { generateSEOTags } from 'prerender-core';

generateSEOTags is from the separate 'prerender-core' package, not this plugin.

defineConfig
```
import { defineConfig } from 'vite';
```
Standard Vite export, not from the plugin.

Quickstart

Configures the plugin with two routes and a custom render function in a Vite config file.

import { defineConfig } from 'vite';
import prerenderStatic from 'vite-plugin-prerender-static';

export default defineConfig({
  plugins: [
    prerenderStatic({
      routes: [
        {
          path: '/',
          tags: {
            title: 'Home',
            description: 'Welcome to my site',
          },
        },
        {
          path: '/about',
          tags: {
            title: 'About',
            description: 'About us page',
          },
        },
      ],
      render: (route) => {
        return `<div id="root">Static content for ${route.path}</div>`;
      },
    }),
  ],
});