Vite Setup Guide

Configure PawaJS manually within a standard Vite project for maximum flexibility and performance.

1. Scaffold your project

Start by creating a new directory and initializing a Vite project using the Vanilla template.

bash 

                 
npm create vite@latest my-pawa-app -- --template vanilla-ts
cd my-pawa-app
npm install pawajs
npm install vite-plugin-pawajs --save-dev

2. Vite Configuration

While PawaJS works without a compiler, we highly recommend using the official Vite plugin. It enables automatic component naming for RegisterComponent and ensures minifier-safe return statements for hooks.

vite.config.ts
Basic configuration for a PawaJS application.
ts 

                 
import { defineConfig } from 'vite';
import { pawajsPlugin } from 'vite-plugin-pawajs';

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

3. Implementation

Update your <code class="text-blue-500 font-mono">src/main.ts</code> to initialize the PawaJS runtime.

ts 

                 
import { pawaStartApp, RegisterComponent, html, $state, useInsert } from 'pawajs';

// 1. Define a simple component
const Counter = () => {
    const count = $state<number>(0);
    useInsert({ count });

    return html`
        <div class="p-8 border rounded-lg shadow-md flex flex-col items-center">
            <h1 class="text-2xl font-bold">Count: @{count.value}</h1>
            <button on-click="count.value++" class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                Increment
            </button>
        </div>
    `;
};

// 2. Register it globally
RegisterComponent(Counter);

// 3. Start the application
pawaStartApp(document.getElementById('app')!);

4. Markup Structure

Ensure your <code class="text-blue-500 font-mono">index.html</code> has the corresponding custom element.

html 

                 
<body>
  <div id="app">
      <counter-app></counter-app>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>