Quick Start

Three examples to get you productive in minutes.

1. Reactive counter

The minimal Courvux app — reactive state + event binding in a single object.

main.js

import { createApp } from 'courvux';

createApp({
    template: `
        <div>
            <h1>{{ count }}</h1>
            <button @click="count++">Increment</button>
            <button @click="count = 0">Reset</button>
        </div>
    `,
    data: { count: 0 }
}).mount('#app');

2. Two-way binding + conditionals

cv-model syncs input to state. cv-if/cv-else toggle DOM nodes.

main.js

createApp({
    template: `
        <div>
            <input cv-model="name" placeholder="Your name" />
            <p cv-if="name">Hello, {{ name }}!</p>
            <p cv-else>Enter your name above.</p>
        </div>
    `,
    data: { name: '' }
}).mount('#app');

3. List with keyed reconciliation

cv-for with :key enables efficient DOM reuse — only added/removed/reordered nodes are touched.

main.js

createApp({
    template: `
        <ul>
            <li cv-for="item in items" :key="item.id">
                {{ item.text }}
                <button @click="remove(item.id)">×</button>
            </li>
        </ul>
        <input cv-model="newItem" @keydown.enter="add()" placeholder="Add item..." />
    `,
    data: { items: [], newItem: '', _id: 0 },
    methods: {
        add() {
            if (!this.newItem.trim()) return;
            this.items = [...this.items, { id: ++this._id, text: this.newItem }];
            this.newItem = '';
        },
        remove(id) {
            this.items = this.items.filter(i => i.id !== id);
        }
    }
}).mount('#app');

Larger apps — router + store

Add a router for multi-page navigation and a store for global state:

main.js

import { createApp, createRouter, createStore } from 'courvux';

const store = createStore({
    state: { user: 'guest' },
    actions: {
        login(name) { this.user = name; }
    }
});

const router = createRouter([
    { path: '/',      component: HomeComp },
    { path: '/about', component: AboutComp }
], { mode: 'hash' });

createApp({ store, router, template: '<router-view />' }).mount('#app');

Every API shown here is covered in depth in the sidebar sections. Start with Template Syntax or jump to the TODO demo.

← Installation Template Syntax →