Lily Design System™

Tutorial sa Vue

Mga single-file component ng Vue 3 na may typed na prop, defineModel two-way binding, at v-bind="$attrs" pass-through.

Ang bubuuin mo

Isang maliit na contact form — input na may label, submit button, v-model binding, tunay na gawi ng keyboard at screen reader — una ay hubad, pagkatapos ay may istilo, sa humigit-kumulang 10 minuto.

Bago ka magsimula

Kailangan mo ng git, Node 22 o mas bago, at pnpm 10 o mas bago. Gumagana ang anumang proyektong Vue 3 — Nuxt, Vite, o payak na Vue.

Hakbang 1 — Kunin ang code

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

Ang mga component ay mga flat na file sa components/ — Button.vue, TextInput.vue — bawat isa ay may test, story, at mga dokumento sa tabi nito. Kopyahin ang mga file na kailangan mo, o i-vendor ang repo.

Hakbang 2 — Ang una mong component

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

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

Nagre-render ng <button class="button" type="button">. Tumutugma ang mga prop sa ibang framework: type, disabled, pressed, label, kasama ang attribute fall-through para sa lahat ng iba pa.

Hakbang 3 — Bumuo ng maliit na form

<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 ay kumukuha ng nakikitang label bilang sarili nitong prop sa halip na nested na label component — ipasa ito nang isang beses, sa Field, at TextInputsa label ay nagbibigay ng accessible na pangalan.

Napatunayan noong 2026-08-29: nag-nest ang naunang draft ng hiwalay na Label sa loob ng Field, na nagre-render ng dalawang label (isang walang laman) dahil Field ay nagre-render na ng sarili nito mula sa label prop — nahuli sa pamamagitan ng pag-compile ng eksaktong snippet. Ang composed na ruta ng contact-form ay parehong pattern, sinubukan ng tunay na e2e at axe na pagsusuri.

TextInput ay gumagamit ng defineModel, kaya ang payak na v-model ay gumagana agad.

Suriin ang gawa mo: patakbuhin ang app at mukhang payak ang form — eksakto ayon sa layunin: ang istilo ay nasa unahan pa. Pindutin ang Tab: gumagalaw ang focus sa bawat kontrol, naba-balita ang label, at gumagana ang pagsumite. Tapos na ang gawi; sa iyo ang hitsura at iyon ang susunod.

Hakbang 4 — Bigyan ng istilo

Bigyan ng istilo ang mga class hook — .button, .text-input, .label, .field — sa iyong stylesheet, o mag-link ng handa nang tema sa index.html / nuxt.config: 

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

Hakbang 5 — Tingnan ang lahat na gumagana

Ang Nuxt na halimbawang app ay ang buong catalog na may istilo at demo, na may Playwright e2e at 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

Mga susunod na hakbang

May mga tanong habang nasa daan? Ang pahina ng tulong ay puno ng mga sagot — at kung maaaring maging mas malinaw ang isang hakbang, sabihin sa amin at masaya naming pagbubutihin ang tutorial.