Build Your Own Framework

⚠️

This documentation is a draft. Directly reach out to Vike maintainers if you're interested in this.

With Vike, you can create your own Next.js / Nuxt with only hundreds of lines of code.

Vike frameworks use the same interface as regular Vike apps: the only difference is that some code (e.g. onRenderHtml()) lives in app/node_modules/framework/ instead of app/.

Your framework can include more functionality beyond Vike, such as a custom server, custom deployment integration, custom data fetching integration, etc.

Basic framework

A basic Vike framework provides a renderer so that the user of your framework doesn't have to implement it:

# Renderer implemented by the framework
node_modules/framework/renderer/+onRenderHtml.js
node_modules/framework/renderer/+onRenderClient.js
 
# User page files
pages/index/+Page.js
pages/about/+Page.js

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 using /pages/**/+*.js files.

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

All-included framework

Beyond integrating Vike with a UI framework, 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).

More tools

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