Components Basics

Sprig components can be JavaScript functions that return DOM nodes or .sprig files compiled by the repository's Vite plugin. A .sprig file has <script setup>, exactly one root in <template>, and optional style blocks. Imported .sprig component tags receive props, default children, and named slots.

<script setup>
import { signal } from 'sprig-framework';
const [count, setCount] = signal(0);
</script>
<template><button @click="setCount(count() + 1)">{{ count() }}</button></template>

Sprig is not Vue: there is no Options API, global component registry, or arbitrary HTML custom-element component syntax. See Single-File Components and Components In-Depth.