Lily Design System™

Vue ट्युटोरियल

टाइप केलेले props असलेले Vue 3 एक-फाइल घटक, defineModel द्विदिशा बाइंडिंग, आणि v-bind="$attrs" पास-थ्रू.

तुम्ही काय बनवाल

एक छोटा संपर्क फॉर्म — लेबल असलेले क्षेत्र, सबमिट बटण, v-model बाइंडिंग, खरे कीबोर्ड आणि स्क्रीन-रीडर वर्तन — आधी साधा, मग शैलीबद्ध, सुमारे १० मिनिटांत.

सुरू करण्यापूर्वी

तुम्हाला git, Node 22 किंवा नवीन, आणि pnpm 10 किंवा नवीन लागेल. कोणताही Vue 3 प्रकल्प चालेल — Nuxt, Vite किंवा साधे Vue.

पायरी १ — कोड मिळवा

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 आणि दस्तऐवज. हव्या त्या फाइल्स कॉपी करा, किंवा रेपो आणा.

पायरी २ — तुमचा पहिला घटक

<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, तसेच बाकी सर्वासाठी गुणधर्म पास-थ्रू.

पायरी ३ — एक छोटा फॉर्म बनवा

<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: फोकस प्रत्येक नियंत्रणातून जातो, लेबल जाहीर होते आणि सबमिट चालते. वर्तन पूर्ण आहे; देखावा तुमचा आहे आणि पुढची पायरी आहे.

पायरी ४ — त्याला शैली द्या

क्लास हुकना शैली द्या — .button, .text-input, .label, .field — तुमच्या स्टाइलशीटमध्ये, किंवा तयार थीम येथे लिंक करा index.html / nuxt.config: 

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

पायरी ५ — सगळे चालताना पहा

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

पुढील पायऱ्या

वाटेत प्रश्न आहेत? मदत पृष्ठ उत्तरांनी भरलेले आहे — आणि एखादी पायरी अधिक स्पष्ट करता आली तर, आम्हाला सांगा आणि आम्ही आनंदाने ट्युटोरियल सुधारू.