Samouczek Vue — Lily Design System

Co zbudujesz

Mały formularz kontaktowy — pole z etykietą, przycisk wysyłania, v-model wiązanie, prawdziwe działanie klawiatury i czytnika ekranu — najpierw surowy, potem ostylowany, w około 10 minut.

Zanim zaczniesz

Potrzebujesz gita, Node 22 lub nowszego i pnpm 10 lub nowszego. Dowolny projekt Vue 3 się nadaje — Nuxt, Vite lub czysty Vue.

Krok 1 — Pobierz kod

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

Komponenty to płaskie pliki w components/ — Button.vue, TextInput.vue — każdy z własnym testem, story i dokumentacją obok. Skopiuj potrzebne pliki albo wciągnij repozytorium.

Krok 2 — Twój pierwszy komponent

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

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

Renderuje <button class="button" type="button">. Propsy odpowiadają innym frameworkom: type, disabled, pressed, label, plus przepuszczanie atrybutów dla całej reszty.

Krok 3 — Złóż mały formularz

<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 przyjmuje widoczną label jako własny props zamiast zagnieżdżonego komponentu etykiety — przekaż ją raz, na Fieldoraz TextInputz label dostarcza dostępną nazwę.

Zweryfikowano 2026-08-29: wcześniejszy szkic zagnieżdżał osobny komponent Label wewnątrz Field, co renderowało dwie etykiety (jedną pustą), ponieważ Field już renderuje własną z wejścia label props — wykryto, kompilując dokładny fragment. Trasa Złożona trasa formularza kontaktowego to ten sam wzorzec, sprawdzony prawdziwymi testami e2e i axe.

TextInput używa defineModel, więc zwykły v-model działa od razu.

Sprawdź swoją pracę: uruchom aplikację, a formularz wygląda surowo — dokładnie tak, jak zamierzono: stylowanie jest jeszcze przed nami. Naciśnij Tab: fokus przechodzi przez każdą kontrolkę, etykieta jest odczytywana, a wysyłanie działa. Zachowanie jest gotowe; wygląd należy do ciebie i jest następnym krokiem.

Krok 4 — Ostyluj go

Ostyluj haczyki klas — .button, .text-input, .label, .field — w swoim arkuszu stylów lub podlinkuj gotowy motyw w index.html / nuxt.config:

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

Krok 5 — Zobacz, jak to wszystko działa

Aplikacja przykładowa Nuxt to cały katalog ostylowany i zademonstrowany, z Playwright e2e i punktem odniesienia 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

Następne kroki

Motywy — przełączanie w czasie działania pomocnikiem theme-picker dla Vue.
Pomocniki preferencji — język i rozmiar tekstu.
Katalog komponentów — właściwości, ARIA i klawiatura dla każdego komponentu.

Pytania po drodze? Strona pomocy jest pełna odpowiedzi — a jeśli jakiś krok mógłby być jaśniejszy, daj nam znać a chętnie ulepszymy samouczek.