vite-plugin-vanjs

A mini meta-framework for VanJS developed around the awesome vite and tested with vitest. The plugin comes with a set of modules to streamline your workflow:

• @vanjs/router - one of the most important part of an application which allows you to split code and lazy load page like components with ease, handles both Client Side Rendering (SSR) and Server Side Rendering (CSR) and makes it really easy to work with;
• @vanjs/meta - allows you to create metadata for your pages as well as load additional assets with ease;
• @vanjs/jsx - enables JSX transformation;
• @vanjs/setup - enables loading VanJS modules isomorphically;
• @vanjs/server - provides various tools for Server Side Rendering (SSR);
• @vanjs/client - provides various tools for Client Side Rendering (CSR).

The plugin will automatically load the appropriate Van or VanX objects depending on the client/server environment with zero configuration needed. It uses the mini-van-plate/shared module to register the required objects in an isomorphic enviroment.

Also in development mode, the plugin will load the van.debug.js module to help you better troubleshoot your VanJS application.

Notes

• The plugin uses van-ext along with mini-van-plate so you can have everything ready from the start.
• Kickstart your VanJS project with npm create vanjs@latest. Some starter templates feature this plugin and most essential tools.

Install

npm install vite-plugin-vanjs@latest

pnpm add vite-plugin-vanjs@latest

deno add npm:vite-plugin-vanjs@latest

bun add vite-plugin-vanjs@latest

Wiki

For a complete guide on how to use the plugin, be sure to check the wiki:

• Quick Start: the right place to get started;
• Routing: a complete guide on how to configure routing;
• Metadata: the quick guide to help you manage your app meta tags;
• JSX: a complete guide on how to use JSX transformation;
• Isomorphic: a quick guide on isomorphism in VanJS;
• About: some note on the project.

Credits

• van-jsx a simple Vanilla JSX implementation;
• vanjs-jsx the official VanJS addon;
• surplus for Typescript definitions also used by SolidJS;
• inferno also for typescript definitions.

License

Released under MIT.