Quick Start

Create a new Nexa project using the official CLI:

npx nexa-init my-app
cd my-app
npm run dev

Project Structure

my-app/
├── src/
│   ├── main.ts          # Entry point
│   └── App.nexa         # Root component
├── index.html
├── vite.config.ts
└── package.json

Your First Component

Nexa uses Single-File Components (.nexa files) with a familiar structure:

<script setup>
import { signal } from 'nexa-framework'

const count = signal(0)
const increment = () => count.value++
</script>

<template>
  <div>
    <h1>Hello Nexa!</h1>
    <p>Count: {{ count.value }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<style scoped>
button {
  background: #4f46e5;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
}
</style>

Mounting the App

// src/main.ts
import { mount, h } from 'nexa-framework'
import App from './App.nexa'

const app = h(App, null)
mount(app, document.getElementById('app')!)

Key Concepts

• Signals — Reactive values that trigger DOM updates automatically
• Components — Reusable pieces with setup() and render()
• SFC — Single-File Components with scoped styles and template compilation
• Directives — v-if, v-for, v-show, v-model for template logic