Lily Design System™

Vue ٹیوٹوریل

ٹائپ شدہ props والے Vue 3 ایک-فائل اجزاء، defineModel دو طرفہ بائنڈنگ، اور v-bind="$attrs" پاس تھرو۔

آپ کیا بنائیں گے

ایک چھوٹا رابطہ فارم — لیبل والا خانہ، جمع کرانے کا بٹن، v-model بائنڈنگ، حقیقی کی بورڈ اور اسکرین ریڈر رویہ — پہلے سادہ، پھر اسلوب کے ساتھ، تقریباً 10 منٹ میں۔

شروع کرنے سے پہلے

آپ کو git، Node 22 یا نیا، اور pnpm 10 یا نیا چاہیے۔ کوئی بھی Vue 3 منصوبہ چلے گا — Nuxt، Vite یا سادہ Vue۔

مرحلہ 1 — کوڈ حاصل کریں

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

اجزاء یہاں سپاٹ فائلوں کی صورت میں ہیں: components/ — Button.vue, TextInput.vue — ہر ایک کے ساتھ اس کا ٹیسٹ، story اور دستاویزات۔ جو فائلیں چاہیے کاپی کریں، یا ریپو لے آئیں۔

مرحلہ 2 — آپ کا پہلا جزو

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

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

یہ دکھاتا ہے <button class="button" type="button">۔ Props دیگر فریم ورکس سے مطابقت رکھتے ہیں: type, disabled, pressed, label، ساتھ باقی سب کے لیے خصوصیت پاس تھرو۔

مرحلہ 3 — ایک چھوٹا فارم بنائیں

<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 نظر آنے والے label اپنے prop کے طور پر، اندر رکھے لیبل جزو کے طور پر نہیں — اسے ایک بار دیں، پر Fieldاور TextInputکا label قابلِ رسائی نام فراہم کرتا ہے۔

2026-08-29 کو تصدیق شدہ: پچھلے مسودے نے الگ Label کے اندر Fieldکے اندر رکھا تھا، جس سے دو لیبل (ایک خالی) ظاہر ہوئے کیونکہ Field پہلے ہی اپنا لیبل label prop — عین ٹکڑے کو مرتب کر کے پتا چلا۔ راستہ مرکب رابطہ-فارم راستہ وہی نمونہ ہے، حقیقی e2e اور axe ٹیسٹوں سے پرکھا ہوا۔

TextInput استعمال کرتا ہے defineModel، اس لیے سادہ v-model فوراً کام کرتا ہے۔

اپنا کام جانچیں: ایپ چلائیں اور فارم سادہ نظر آتا ہے — بالکل جیسا ارادہ تھا: اسلوب ابھی آگے ہے۔ دبائیں Tab: فوکس ہر کنٹرول سے گزرتا ہے، لیبل کا اعلان ہوتا ہے اور جمع کرانا کام کرتا ہے۔ رویہ مکمل ہے؛ ظاہری شکل آپ کی ہے اور اگلا قدم ہے۔

مرحلہ 4 — اسے اسلوب دیں

کلاس ہُکس کو اسلوب دیں — .button, .text-input, .label, .field — اپنی اسٹائل شیٹ میں، یا کوئی تیار تھیم یہاں لنک کریں index.html / nuxt.config: 

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

مرحلہ 5 — سب کچھ چلتا دیکھیں

Nuxt مثالی ایپ مکمل کیٹلاگ ہے اسلوب اور نمائش کے ساتھ، Playwright e2e اور 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

اگلے مراحل

راستے میں سوالات ہیں؟ مدد کا صفحہ جوابات سے بھرا ہے — اور اگر کوئی مرحلہ مزید واضح ہو سکتا ہے، ہمیں بتائیں اور ہم خوشی سے ٹیوٹوریل بہتر بنائیں گے۔