Lily Design System™

Koyarwar Vue

Abubuwan fayil ɗaya na Vue 3 masu props masu rubutu, defineModel ɗaurin hanyoyi biyu, da wucewa ta v-bind="$attrs" .

Abin da za ka gina

Ƙaramin fom na tuntuɓa — fili mai lakabi, maɓallin aikawa, v-model ɗaure, ainihin halayyar maɓallan rubutu da na'urar karanta allo — da farko ba tare da tsari ba, sannan da tsari, cikin kusan mintuna 10.

Kafin ka fara

Kana buƙatar git, Node 22 ko sabo, da pnpm 10 ko sabo. Kowane aikin Vue 3 yana aiki — Nuxt, Vite ko Vue mai sauƙi.

Mataki na 1 — Ɗauki lambar

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

Abubuwan fayiloli ne masu shimfiɗe a cikin components/ — Button.vue, TextInput.vue — kowanne da gwajinsa, story da takardunsa a gefensa. Kwafi fayilolin da kake buƙata, ko ɗauko ma'ajiyar.

Mataki na 2 — Abu na farko naka

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

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

Yana nuna <button class="button" type="button">. Props suna daidaita da sauran tsare-tsare: type, disabled, pressed, label, tare da wucewar sifofi ga duk sauran abubuwa.

Mataki na 3 — Haɗa ƙaramin fom

<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 yana ɗaukar label a matsayin prop nasa maimakon abin lakabi da aka saka a ciki — ka ba shi sau ɗaya, a kan Fieldda TextInputmai dacewa na label yana ba da suna mai sauƙin isa.

An tabbatar a 2026-08-29: wani daftarin da ya gabata ya saka wani abu Label a cikin Field, wanda ya nuna lakabi biyu (ɗaya fanko) saboda Field tuni yana nuna nasa daga shigarwar label prop — an gano ta hanyar haɗa ainihin gutsuren. Hanyar Hanyar fom ɗin tuntuɓa da aka haɗa tsari ɗaya ne, wanda aka gwada da ainihin gwaje-gwajen e2e da axe.

TextInput yana amfani da defineModel, don haka v-model mai sauƙi yana aiki daga akwati.

Duba aikinka: gudanar da app ɗin kuma fom ɗin yana kama da maras tsari — daidai kamar yadda aka nufa: tsarin yana nan gaba. Danna Tab: mayar da hankali yana ratsa kowane abin sarrafawa, ana sanar da lakabin, kuma aikawa yana aiki. An gama halayyar; kamannin naka ne kuma shi ne mataki na gaba.

Mataki na 4 — Ba shi tsari

Ba ƙugiyoyin aji tsari — .button, .text-input, .label, .field — a takardar salonka, ko haɗa jigon da aka shirya a cikin index.html / nuxt.config: 

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

Mataki na 5 — Kalli komai yana aiki

App ɗin misali na Nuxt shi ne cikakken kundin da tsari da nunawa, tare da Playwright e2e da tushen 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

Matakai na gaba

Tambayoyi a hanya? Shafin taimako cike yake da amsoshi — kuma idan wani mataki zai iya zama mafi bayyana, gaya mana kuma za mu gyara koyarwar da farin ciki.