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

अगले चरण

रास्ते में सवाल हैं? सहायता पृष्ठ उत्तरों से भरा है — और अगर कोई चरण और स्पष्ट हो सकता है, हमें बताएँ और हम खुशी से ट्यूटोरियल सुधारेंगे।