Lily Design System™

Vue-handleiding

Vue 3 single-file-componenten met getypeerde props, defineModel tweerichtingsbinding en v-bind="$attrs" -doorvoer.

Wat je gaat bouwen

Een klein contactformulier — invoerveld met label, verzendknop, v-model -binding, echt toetsenbord- en schermlezergedrag — eerst kaal, dan vormgegeven, in ongeveer 10 minuten.

Voordat je begint

Je hebt git, Node 22 of nieuwer en pnpm 10 of nieuwer nodig. Elk Vue 3-project werkt — Nuxt, Vite of gewone Vue.

Stap 1 — Haal de code op

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

De componenten zijn platte bestanden in components/ — Button.vue, TextInput.vue — elk met zijn test, story en documentatie ernaast. Kopieer de bestanden die je nodig hebt, of haal de repo binnen.

Stap 2 — Je eerste component

<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">. De props komen overeen met de andere frameworks: type, disabled, pressed, label, plus attribuutdoorvoer voor al het andere.

Stap 3 — Stel een klein formulier samen

<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 neemt het zichtbare label als eigen prop in plaats van een geneste labelcomponent — geef het één keer door, op Fielden TextInputvan label levert de toegankelijke naam.

Geverifieerd op 2026-08-29: een eerder concept nestelde een aparte Label binnen Field, wat twee labels (een leeg) rendert omdat Field zijn eigen label al rendert vanuit de label -prop — ontdekt door het exacte fragment te compileren. De De samengestelde contactformulierroute is hetzelfde patroon, beproefd met echte e2e- en axe-tests.

TextInput gebruikt defineModel, dus een gewone v-model werkt meteen.

Controleer je werk: start de app en het formulier ziet er kaal uit — precies zoals bedoeld: de vormgeving komt nog. Druk op Tab: de focus beweegt door elk bedieningselement, het label wordt voorgelezen en verzenden werkt. Het gedrag is klaar; het uiterlijk is aan jou en komt hierna.

Stap 4 — Geef het vorm

Geef de klassehaken vorm — .button, .text-input, .label, .field — in je stylesheet, of koppel een kant-en-klaar thema in index.html / nuxt.config: 

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

Stap 5 — Zie alles werken

Nuxt voorbeeld-app is de volledige catalogus vormgegeven en gedemonstreerd, met Playwright e2e en een axe-core-basislijn: 

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

Volgende stappen

Vragen onderweg? De helppagina staat vol antwoorden — en als een stap duidelijker kan, laat het ons weten en we verbeteren de handleiding graag.