Skip to content

Quick Start

Jump to bottom
thednp edited this page Apr 19, 2025 · 4 revisions

Installation

  1. Install the plugin:
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
  1. To add Typescript support, edit your src/vite-env.d.ts (or any global types you have set in your app) as follows:
/// <reference types="vite/client" />
/// <reference types="vite-plugin-vanjs" />

Configuration

Update your vite.config.ts file:

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

export default defineConfig({
  plugins: [
    vanjs()
    // ..other plugins
  ],
});

Additional parameters can be used to configure the file system routing.

Usage

Let's create a basic SPA (Single Page Application):

  1. first let's start from a starter HTML template located in your project root /index.html:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VanJS App</title>
  </head>
  <body>
    <main id="app"></main>
    <script type="module" src="/src/app.ts"></script>
  </body>
</html>

Tip: modify the markup to your needs, you might want to set metatags and other static assets.

  1. now let's create a basic app
// src/app.ts
import van from "vanjs-core";

export const App = () => {
  const { div, h1, p } = van.tags;
  return div(
    h1("Hello VanJS!"),
    p({ class: "read-the-docs" }, "Click on the VanJS logo to learn more"),
  );
}

const root = document.getElementById("app") as HTMLElement;
van.add(root, App());

Other Resources

  • Tutorial the official VanJS tutorial
  • create-vanjs a tool to kickstart your VanJS projects in seconds from various vite starter templates
  • Routing to help you get started with routing
  • Metadata to help you manage your app meta tags
  • JSX to guide you on how to enable JSX transformation
Clone this wiki locally