Server-Side Rendering (SSR)

wouter-vue supports full SSR with Vite, including Static Site Generation (SSG) for pre-rendering.

Basic Setup

entry-server.js:

App.vue:

Vite Configuration

vite.config.js:

Base Path Configuration

When deploying to a subdirectory (like GitHub Pages), configure the base path:

1. Set base in vite.config.js:

2. App.vue automatically reads it:

3. Router handles it automatically:

   • Passes base prop to <Router>
   • Router internally strips base from URLs
   • All navigation works correctly

Static Site Generation (SSG)

For pre-rendering static pages, create a prerender.js script:

Add to package.json:

Redirect Handling

<Redirect> automatically sets SSR redirects:

Router Props

Notes

• Always wrap app with <Router> for SSR
• Pass ssrPath and ssrSearch props to <Router> from entry-server
• Set base prop automatically from import.meta.env.BASE_URL
• Router handles base path internally - no manual URL manipulation needed
• See full example for complete SSR setup
• This documentation site is built with wouter-vue SSR/SSG - see source code