Vite Vue SSR

Simple yet powerful Server Side Rendering for Vite 2 in Node.js for Vue.

• ⚡ Lightning Fast HMR (powered by Vite, even in SSR mode).
• 💁‍♂️ Consistent DX experience abstracting some or most of the SSR complexity.
• 🔍 Small library, very opinionated of your project entry points, not at all opinionated about your page routing and API logic.
• 🔥 Fast and SEO friendly thanks to SSR, with SPA takeover for snappy UX.
• 🧱 Compatible with Vite's plugin ecosystem such as file-based routing, PWA, etc.

Vite SSR can be deployed to any Node.js or browser-like environment, including serverless platforms like Vercel, Netlify, or even Cloudflare Workers. It can also run with more traditional servers like Express.js or Fastify.

Wite Wue SSR is based on the great work of https://github.com/frandiox/vite-ssr. In fact, I copied all of his work and changed bits and pieces to match my own personal opinion about things. An example project is on the TODO list.

Installation

Create a normal Vite project for Vue or React.

yarn create vite --template [vue|vue-ts]

Then, add wite-wue-ssr with your package manager (direct dependency) and your framework router.

yarn add wite-wue-ssr vue@3 vue-router@4 @vueuse/head

Usage

[TODO] Add Vite SSR plugin to your Vite config file (see vite.config.js for a full example).

// vite.config.js
import vue from '@vitejs/plugin-vue'
import { WiteWueSsrPlugin } from 'wite-wue-ssr-test/plugin'

export default {
    plugins: [WiteWueSsrPlugin(), vue()],
}

[TODO] Then, simply import the main Vite SSR handler in your main entry file as follows. See full examples for Vue.

TODO

import App from './App' // Vue or React main app
import routes from './routes'
import { WiteWueSsrPlugin } from 'wite-wue-ssr-test/plugin'
// or from 'vite-ssr/vue' or 'vite-ssr/react', which slightly improves typings

export default viteSSR(App, { routes }, (context) => {
    /* Vite SSR main hook for custom logic */
    /* const { app, router, initialState, ... } = context */
})

If you need conditional logic that should only run in either client or server, use Vite's import.meta.env.SSR boolean variable and the tree-shaking will do the rest.

TODO State Hydration