Tutorial Vue — Lily Design System

Cosa costruirai

Un piccolo modulo di contatto — campo con etichetta, pulsante di invio, v-model binding, comportamento reale di tastiera e screen reader — prima spoglio, poi stilizzato, in circa 10 minuti.

Prima di iniziare

Servono git, Node 22 o successivo e pnpm 10 o successivo. Va bene qualsiasi progetto Vue 3 — Nuxt, Vite o Vue semplice.

Passo 1 — Ottieni il codice

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-headless
pnpm install
pnpm test        # vitest + @testing-library/vue
pnpm run storybook   # browse all 571 components

I componenti sono file piatti in components/ — Button.vue, TextInput.vue — ognuno con il suo test, la sua story e la sua documentazione accanto. Copia i file che ti servono, oppure integra il repository.

Passo 2 — Il tuo primo componente

<script setup>
import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<template>
  <Button @click="save">Save</Button>
</template>

Rende <button class="button" type="button">. Le prop rispecchiano gli altri framework: type, disabled, pressed, label, più il passaggio degli attributi per tutto il resto.

Passo 3 — Componi un piccolo modulo

<script setup>
import { ref } from "vue";
import Form from ".../components/Form.vue";
import Field from ".../components/Field.vue";
import TextInput from ".../components/TextInput.vue";
import Button from ".../components/Button.vue";

const name = ref("");
</script>

<template>
  <Form @submit="handleSubmit">
    <Field label="Full name" required>
      <TextInput id="name" label="Full name" v-model="name" required />
    </Field>
    <Button type="submit">Save</Button>
  </Form>
</template>

Field riceve l' label come prop propria invece di un componente etichetta annidato — passala una sola volta, su Fielde TextInputcorrispondente label fornisce il nome accessibile.

Verificato il 2026-08-29: una bozza precedente annidava un componente Label dentro Field, che rendeva due etichette (una vuota) perché Field rende già la propria dall'input label prop — individuato compilando lo snippet esatto. La rotta La rotta composta del modulo di contatto è lo stesso schema, collaudato da veri test e2e e axe.

TextInput usa defineModel, quindi un semplice v-model funziona subito.

Controlla il lavoro: avvia l'app e il modulo appare spoglio — esattamente come previsto: lo stile deve ancora venire. Premi Tab: il focus si sposta su ogni controllo, l'etichetta viene annunciata e l'invio funziona. Il comportamento è fatto; l'aspetto è tuo, ed è il prossimo passo.

Passo 4 — Dagli uno stile

Stilizza gli hook di classe — .button, .text-input, .label, .field — nel tuo foglio di stile, oppure collega un tema pronto in index.html / nuxt.config:

<link rel="stylesheet" href="/themes/nord.css" />

Passo 5 — Guarda tutto in funzione

App di esempio Nuxt è il catalogo completo stilizzato e dimostrato, con e2e Playwright e una baseline axe-core:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-nuxt-examples
pnpm install && pnpm run dev

Prossimi passi

Temi — cambio a runtime con l'helper theme-picker per Vue.
Helper delle preferenze — lingua e dimensione del testo.
Catalogo dei componenti — proprietà, ARIA e tastiera per ogni componente.

Domande lungo la strada? La pagina di aiuto è piena di risposte — e se un passo può essere più chiaro, faccelo sapere e miglioreremo volentieri il tutorial.