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

अगिला कदम

रास्ता में सवाल बा? मदद पन्ना जवाब से भरल बा — आ अगर कवनो कदम अउरी साफ हो सकेला, हमनी के बताईं आ हमनी खुशी से ट्यूटोरियल सुधारब।