Static prerendering plugin for Vite with SEO, meta tags, and multi-route support.
npm install vite-plugin-prerender-staticDead-simple static prerendering for Vite, implemented correctly.
A lightweight static prerendering solution for Vite with built-in SEO meta tag support, multi-route generation, and zero runtime dependencies.
It generates fully static HTML pages from your SPA at build time, making it ideal for SEO-focused Vite applications without the complexity of SSR.
---
- Vite-native plugin (runs during build)
- Static prerendering for multiple routes
- SEO meta tag generation (Open Graph, Twitter, JSON-LD)
- Framework-agnostic core
- Correct handling of nested routes
- Drop-in replacement with no breaking changes
- Compatible with React, Vue, Svelte, Solid, and Vanilla JS
---
``bash`
npm install vite-plugin-prerender-static
or
`bash`
pnpm add vite-plugin-prerender-static
---
`ts
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
;
},
}),
],
});
`---
SEO Configuration
$3
ts
{
path: "/blog",
tags: {
title: "Blog",
description: "Latest posts",
author: "Rahul Sharma",
url: "https://example.com/blog",
image: "https://example.com/og.png",
keywords: "vite, seo, prerender",
canonical: "https://example.com/blog",
robots: "index, follow",
schema: {
"@context": "https://schema.org",
"@type": "Blog"
}
}
}
`---
Template System
By default, the plugin looks for
in the project root.$3
`html
%LINKS%
%TITLE%
%APP%
`$3
| Placeholder | Description |
| ----------- | ---------------------------------- |
|
| Injected scripts, styles, SEO tags |
| %TITLE% | Page title |
| %APP% | Rendered HTML content |---
Default Behavior
- If
template.html is missing, it is automatically created
- If render() is not provided, a fallback HTML output is used
- Relative asset paths are fixed automatically
- The plugin runs only during the Vite build phase---
Options
`ts
prerenderStatic({
routes: {
path: string
tags: string | SEOTagOptions
}[], render?: (route) => string,
template?: string,
dist?: string
})
`---
Core Package
This plugin is built on a framework-agnostic core:
ts
import { generateSEOTags } from "prerender-core";
``The core package can be used independently in:
- Node.js scripts
- Custom static site generators
- Other build pipelines
---
| Tool | Supported Versions |
| ---------- | ------------------------- |
| Vite | v4 → v7 |
| Node.js | v18+ |
| Frameworks | React, Vue, Svelte, Solid |
---
This plugin is a good fit if:
- You need SEO support for SPAs
- You want to avoid SSR complexity
- You are deploying to static hosting
- You want full control over the generated HTML
---
Rahul Sharma
Email: rahu8299@gmail.com
GitHub: https://github.com/rahulsushilsharma
---
MIT © Rahul Sharma
---
- CLI prerender tool
- Automatic route discovery
- HTML transformation hooks
---
Pull requests are welcome.
Please open an issue before proposing major changes.