Lily Design System™

Tutorial Vue

Komponen siji berkas Vue 3 kanthi props kanthi tipe, defineModel pengikatan loro arah, lan panerusan v-bind="$attrs" .

Apa sing bakal sampeyan gawé

Formulir kontak cilik — kolom nganggo label, tombol kirim, v-model pengikatan, prilaku keyboard lan pamaca layar sing nyata — dhisik polosan, banjur ditata, kira-kira 10 menit.

Sadurunge miwiti

Sampeyan butuh git, Node 22 utawa luwih anyar, lan pnpm 10 utawa luwih anyar. Proyek Vue 3 apa wae bisa — Nuxt, Vite utawa Vue biasa.

Langkah 1 — Njupuk kode

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

Komponen iku berkas rata ing components/ — Button.vue, TextInput.vue — saben siji kanthi tes, story lan dokumentasiné ing jejeré. Salin berkas sing dibutuhaké, utawa tarik repositori.

Langkah 2 — Komponen pisanan sampeyan

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

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

Nampilaké <button class="button" type="button">. Props cocog karo kerangka liyané: type, disabled, pressed, label, ditambah panerusan atribut kanggo kabèh liyané.

Langkah 3 — Nyusun formulir cilik

<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 nampa label minangka prop dhéwé, dudu komponen label sing disarangaké — lulusna sepisan, ing Fieldlan TextInputsing cocog saka label nyedhiyakaké jeneng sing bisa diakses.

Dikonfirmasi 2026-08-29: konsep sadurungé nyarangaké komponen Label ing njero Field, sing nampilaké rong label (siji kosong) amarga Field wis nampilaké dhéwé saka input label prop — ditemokaké kanthi ngompilasi potongan sing persis. Rute Rute formulir kontak gabungan iku pola sing padha, diuji nganggo tes e2e lan axe nyata.

TextInput nganggo defineModel, mula v-model biasa langsung mlaku.

Priksa pagawéan sampeyan: jalanna aplikasi lan formulir katon polosan — persis kaya sing dikarepaké: penataan isih ing ngarep. Pencet Tab: fokus mlaku liwat saben kontrol, label diumumaké lan kirim mlaku. Prilaku wis rampung; tampilan iku duwèkmu lan dadi langkah sabanjuré.

Langkah 4 — Tata

Tata pancingan kelas — .button, .text-input, .label, .field — ing lembar gaya sampeyan, utawa sambungna tema sing wis siap ing index.html / nuxt.config: 

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

Langkah 5 — Deleng kabèh mlaku

Aplikasi conto Nuxt iku katalog lengkap sing ditata lan didemonstrasiaké, kanthi Playwright e2e lan garis dhasar 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

Langkah sabanjuré

Ana pitakon ing dalan? Kaca pitulung kebak wangsulan — lan menawa ana langkah sing bisa luwih cetha, kandhanana kita lan kita bakal seneng nyaosi tutorial luwih apik.