Lily Design System™

Tutorial Vue

Komponen fail tunggal Vue 3 dengan prop bertaip, defineModel pengikatan dua hala, dan v-bind="$attrs" lalu-lalang.

Apa yang akan anda bina

Borang hubungan kecil — input berlabel, butang hantar, v-model pengikatan, tingkah laku papan kekunci dan pembaca skrin yang sebenar — mula-mula kosong, kemudian digayakan, dalam kira-kira 10 minit.

Sebelum anda bermula

Anda memerlukan git, Node 22 atau lebih baharu, dan pnpm 10 atau lebih baharu. Mana-mana projek Vue 3 boleh digunakan — Nuxt, Vite atau Vue biasa.

Langkah 1 — Dapatkan kod

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

Komponen ialah fail rata dalam components/ — Button.vue, TextInput.vue — masing-masing dengan ujian, story dan dokumennya di sebelah. Salin fail yang anda perlukan, atau vendor repo.

Langkah 2 — Komponen pertama anda

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

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

Memaparkan <button class="button" type="button">. Prop sepadan dengan rangka kerja lain: type, disabled, pressed, label, ditambah atribut lalu-lalang untuk yang lain.

Langkah 3 — Gubah borang kecil

<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 mengambil label sebagai propnya sendiri dan bukannya komponen label bersarang — hantar sekali, pada Field, dan TextInputyang sepadan pada label membekalkan nama boleh diakses.

Disahkan 2026-08-29: draf awal menyarangkan komponen Label di dalam Field, yang memaparkan dua label (satu kosong) kerana Field sudah memaparkan labelnya sendiri daripada label prop — dikesan dengan mengkompil serpihan tepat itu. laluan borang hubungan gubahan ialah corak yang sama, diuji dengan e2e dan ujian axe sebenar.

TextInput menggunakan defineModel, jadi v-model biasa berfungsi terus.

Semak kerja anda: jalankan aplikasi dan borang kelihatan biasa sahaja — tepat seperti dimaksudkan: penggayaan masih di hadapan. Tekan Tab: fokus bergerak melalui setiap kawalan, label diumumkan dan penghantaran berfungsi. Tingkah laku sudah siap; rupanya milik anda dan itu seterusnya.

Langkah 4 — Gayakan

Gayakan cangkuk kelas — .button, .text-input, .label, .field — dalam helaian gaya anda, atau pautkan tema siap pakai dalam index.html / nuxt.config: 

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

Langkah 5 — Lihat semuanya berfungsi

Aplikasi contoh Nuxt ialah katalog penuh yang digayakan dan didemonstrasikan, dengan e2e Playwright dan garis dasar 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

Langkah seterusnya

Ada soalan di sepanjang jalan? halaman bantuan penuh dengan jawapan — dan jika sesuatu langkah boleh dijelaskan lagi, beritahu kami dan kami dengan senang hati akan memperbaiki tutorial.