Tutorial Vue — Lily Design System

Ce vei construi

Un mic formular de contact — câmp cu etichetă, buton de trimitere, v-model legare, comportament real al tastaturii și al cititorului de ecran — mai întâi simplu, apoi stilizat, în aproximativ 10 minute.

Înainte să începi

Ai nevoie de git, Node 22 sau mai nou și pnpm 10 sau mai nou. Orice proiect Vue 3 merge — Nuxt, Vite sau Vue simplu.

Pasul 1 — Obține codul

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

Componentele sunt fișiere plate în components/ — Button.vue, TextInput.vue — fiecare cu testul, story-ul și documentația alături. Copiază fișierele de care ai nevoie sau adu depozitul.

Pasul 2 — Prima ta componentă

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

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

Randează <button class="button" type="button">. Props corespund celorlalte frameworkuri: type, disabled, pressed, label, plus transmiterea atributelor pentru orice altceva.

Pasul 3 — Compune un formular mic

<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 primește label ca propriul prop, în loc de o componentă etichetă imbricată — transmite-o o singură dată, pe Fieldși TextInputcorespunzător din label oferă numele accesibil.

Verificat la 2026-08-29: o ciornă anterioară imbrica o componentă Label în interiorul Field, ceea ce randa două etichete (una goală) deoarece Field randează deja propria etichetă din intrarea label prop — descoperit compilând fragmentul exact. Ruta Ruta compusă a formularului de contact este același tipar, exersat cu teste e2e și axe reale.

TextInput folosește defineModel, deci un simplu v-model funcționează din prima.

Verifică-ți munca: rulează aplicația și formularul arată simplu — exact cum era intenționat: stilizarea urmează. Apasă Tab: focalizarea trece prin fiecare control, eticheta este anunțată, iar trimiterea funcționează. Comportamentul este gata; aspectul este al tău și urmează.

Pasul 4 — Stilizează-l

Stilizează cârligele de clasă — .button, .text-input, .label, .field — în foaia ta de stil sau leagă o temă gata făcută în index.html / nuxt.config:

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

Pasul 5 — Vezi totul funcționând

Aplicația-exemplu Nuxt este catalogul complet stilizat și demonstrat, cu Playwright e2e și o linie de bază 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

Pașii următori

Teme — comutare în timpul rulării cu ajutorul theme-picker pentru Vue.
Ajutoare pentru preferințe — limbă și dimensiunea textului.
Catalogul de componente — proprietăți, ARIA și tastatură pentru fiecare componentă.

Întrebări pe parcurs? Pagina de ajutor este plină de răspunsuri — iar dacă un pas poate fi mai clar, spune-ne și vom îmbunătăți cu plăcere tutorialul.