vite-plugin-ssr has been renamed Vike, see migration guide.

Build Your Own Framework

This documentation is work-in-progress. Reach out to the vite-plugin-ssr maintainer if you're interested in this.

With vite-plugin-ssr, you can create your own Next.js / Nuxt with only hundreds of lines of code.

Vite-plugin-ssr frameworks use the same interface as regular vite-plugin-ssr apps: the only difference is that some page files (e.g. /renderer/_default.page.server.js) live in app/node_modules/framework/ instead of app/.

Your framework can include more functionality beyond vite-plugin-ssr, such as a custom server, a CLI, deployment, etc.

Basic framework

A basic vite-plugin-ssr framework provides a renderer so that the user doesn't have to implement it:

# Renderer implemented by the framework

# User page files

In other words, the framework takes care of the UI framework integration (React, Vue, ...) so that all the framework's users have left to do is to define UI components and /pages/**/*.page.js files.

Progressively build your framework. We recommend to build your framework progressively by first implementing a normal vite-plugin-ssr app without building any framework. Once you're satisfied with the architecture of your vite-plugin-ssr app, you can start creating your own framework by moving renderer/ from my-app/renderer/ to my-app/node_modules/my-own-framework/renderer/.

Work-in-progress: this page will include examples of basic vite-plugin-ssr frameworks.

All-included framework

Essentially, a vite-plugin-ssr framework is a framework that includes page files (.page.js, .page.server.js, .page.client.js, and/or .page.route.js). Beyond that, there is nothing special about a vite-plugin-ssr framework and you can include anything you want to your framework, such as a custom server (e.g. Express.js), a database and ORM (e.g. SQLite + Prisma), deployment (e.g. Cloudflare Workers), error tracking (e.g. Sentry), a CLI, etc.

You can implement an all-included framework so that all your framework's users have left to do is: define UI components, and define data models (if your framework has a database).

Work-in-progress: this page will include examples of such frameworks.

More tools

See Vike > Getting Started for more tools to build your own framework.