Lily Design System™

Vue-Tutorial

Vue-3-Eendatei-Komponenten mat typiséierte Props, defineModel Zwee-Weeër-Bindung an v-bind="$attrs" -Duerchleeung.

Wat Dir bauen wäert

E klengt Kontaktformulaire — Feld mat Etikett, Schécken-Knäppchen, v-model -Bindung, richtegt Tastatur- an Écranliesser-Verhalen — fir d'éischt nackeg, duerno gestalt, an ongeféier 10 Minutten.

Ier Dir ufänkt

Dir braucht git, Node 22 oder méi nei a pnpm 10 oder méi nei. All Vue-3-Projet funktionéiert — Nuxt, Vite oder einfachen Vue.

Schrëtt 1 — D'Code kréien

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

D'Komponenten sinn flaach Dateien am components/ — Button.vue, TextInput.vue — jidd mat sengem Test, senger Story a senger Dokumentatioun niewendrun. Kopéiert d'Dateien, déi Dir braucht, oder hellt de Repo eran.

Schrëtt 2 — Är éischt Komponent

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

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

Rendert <button class="button" type="button">. D'Props entspriechen deenen aner Frameworks: type, disabled, pressed, label, plus Attribut-Duerchleeung fir alles anescht.

Schrëtt 3 — E klengt Formulaire zesummestellen

<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 hëlt dat siichtbart label als seng eege Prop amplaz vun enger verschachtelter Etikett-Komponent — gitt et eemol weider, bei Fieldan TextInputvun label liwwert den zougänglechen Numm.

Gepréift den 2026-08-29: en ale Brouillon huet eng separat Label bannen Fieldverschachtelt, wat zwee Etiketten (eng eidel) gerendert huet, well Field schonn säin eegenen aus dem label -Prop — entdeckt duerch d'Kompiléiere vum exakte Snippet. D'Route Déi zesummegesat Kontaktformulaire-Route ass datselwecht Muster, getest mat richtegen e2e- an axe-Tester.

TextInput benotzt defineModel, sou datt e einfachen v-model direkt funktionéiert.

Kontrolléiert Är Aarbecht: start d'App an d'Formulaire gesäit nackeg aus — genee wéi geduecht: d'Gestaltung kënnt nach. Dréckt Tab: de Fokus geet duerch all Kontroll, d'Etikett gëtt ugekënnegt an d'Schécken funktionéiert. D'Verhalen ass fäerdeg; d'Ausgesi ass Är a kënnt als Nächst.

Schrëtt 4 — Gestalt et

Gestalt d'Klassen-Hooks — .button, .text-input, .label, .field — an Ärem Stylesheet, oder verlinkt e fäerdegt Thema am index.html / nuxt.config: 

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

Schrëtt 5 — Alles am Aktioun gesinn

Nuxt Beispill-App ass de ganze Katalog gestalt an demonstréiert, mat Playwright e2e an enger axe-core-Baseline: 

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

Nächst Schrëtt

Froen ënnerwee? D'Hëllefsäit ass voller Äntwerten — a wann e Schrëtt méi kloer kéint sinn, soot et eis a mir verbesseren den Tutorial gär.