vite-plugin-vanjs

0.1.18 verified Mon Apr 27 auth: no javascript

vite-plugin-vanjs (v0.1.18) is a meta-framework for VanJS built on Vite, providing routing, JSX support, SSR/SSG, and isomorphic modules. Released with weekly updates, it integrates router, meta management, JSX transformation, and server/client helpers. Key differentiators: zero-config hydration, lazy route loading with async unification since v0.1.17, and automatic van.debug.js in dev mode. Requires node >=20, pnpm >=8.6.0, and peer deps csstype, mini-van-plate, vanjs-core, vanjs-ext.

Common errors

error Cannot find module 'vite-plugin-vanjs/router' ↓

cause Missing subpath export or incorrect import path.

fix

Ensure you use import { router } from 'vite-plugin-vanjs/router' (no default export).

error lazy is not a function ↓

cause Using older version (<0.1.17) or incorrect import.

fix

Update to v0.1.17+ and import { lazy } from 'vite-plugin-vanjs/router'.

error Uncaught TypeError: van.tags is undefined ↓

cause vanjs-core not installed or not imported.

fix

Install vanjs-core and import van before using tags.

Warnings

breaking lazy() changed to async on both server and client in v0.1.17 ↓

fix Update lazy() calls to handle async functions; previously client returned synchronous van.state.

breaking executeLifecycle() signature changed in v0.1.17 ↓

fix Change executeLifecycle(route, params) to match new signature (route, params).

deprecated Script and Style removed from Meta module in v0.1.15 ↓

fix Use separate import for Script and Style from @vanjs/meta or handle manually.

gotcha JSX transformation incompatible with van.debug.js in dev mode ↓

fix Disable van.debug.js or avoid JSX in development; plugin auto-loads van.debug.js in dev mode.

gotcha requires node >=20 and pnpm >=8.6.0 ↓

fix Check Node.js version with `node --version` and pnpm with `pnpm --version`; upgrade if needed.

Install

npm install vite-plugin-vanjs

yarn add vite-plugin-vanjs

pnpm add vite-plugin-vanjs

Imports

vitePluginVanjs

wrong

const vitePluginVanjs = require('vite-plugin-vanjs')

correct

import { vitePluginVanjs } from 'vite-plugin-vanjs'

ESM-only package; requires Vite config ESM.

router

wrong

import { router } from 'vite-plugin-vanjs'

correct

import { router } from 'vite-plugin-vanjs/router'

Router is a separate subpath export; default export is the plugin.

lazy

wrong

const lazy = require('vite-plugin-vanjs/router').lazy

correct

import { lazy } from 'vite-plugin-vanjs/router'

Since v0.1.17, lazy() is async on both server and client.

Quickstart

Basic setup: Vite config with the plugin, then use the router with lazy-loaded routes.

// vite.config.js
import { defineConfig } from 'vite';
import { vitePluginVanjs } from 'vite-plugin-vanjs';

export default defineConfig({
  plugins: [vitePluginVanjs()]
});

// pages/index.js
import { lazy, router } from 'vite-plugin-vanjs/router';
import van from 'vanjs-core';

const Home = () => van.tags.div('Hello from VanJS!');
const routes = {
  '/': Home,
  '/about': lazy(() => import('./pages/About'))
};

const app = document.getElementById('app');
router(app, routes);