Lily Design System™

Hướng dẫn Vue

Thành phần một tệp Vue 3 với thuộc tính có kiểu, defineModel liên kết hai chiều và chuyển tiếp v-bind="$attrs" .

Bạn sẽ xây dựng gì

Một biểu mẫu liên hệ nhỏ — ô nhập có nhãn, nút gửi, v-model liên kết, hành vi bàn phím và trình đọc màn hình thật — lúc đầu để trơn, sau đó thêm kiểu dáng, trong khoảng 10 phút.

Trước khi bắt đầu

Bạn cần git, Node 22 trở lên và pnpm 10 trở lên. Dự án Vue 3 nào cũng được — Nuxt, Vite hoặc Vue thuần.

Bước 1 — Lấy mã

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

Các thành phần là những tệp phẳng trong components/ — Button.vue, TextInput.vue — mỗi cái có bài kiểm thử, story và tài liệu bên cạnh. Sao chép các tệp bạn cần, hoặc đưa kho mã vào.

Bước 2 — Thành phần đầu tiên của bạn

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

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

Hiển thị <button class="button" type="button">. Thuộc tính khớp với các framework khác: type, disabled, pressed, label, cộng với chuyển tiếp thuộc tính cho mọi thứ còn lại.

Bước 3 — Ghép một biểu mẫu nhỏ

<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 nhận label làm thuộc tính riêng thay vì thành phần nhãn lồng bên trong — chỉ truyền một lần, trên Fieldvà TextInputtương ứng label cung cấp tên có thể tiếp cận.

Đã xác minh 2026-08-29: bản nháp trước lồng một thành phần Label bên trong Field, khiến hiển thị hai nhãn (một cái rỗng) vì Field đã tự hiển thị nhãn của nó từ label thuộc tính — phát hiện nhờ biên dịch đoạn mã chính xác. Tuyến Tuyến biểu mẫu liên hệ ghép sẵn cũng theo mẫu này, được kiểm chứng bằng các bài kiểm thử e2e và axe thật.

TextInput dùng defineModelnên v-model thuần hoạt động ngay.

Kiểm tra kết quả: chạy ứng dụng và biểu mẫu trông trơ — đúng như dự định: kiểu dáng còn ở phía trước. Nhấn Tab: tiêu điểm di chuyển qua mọi điều khiển, nhãn được đọc lên và việc gửi hoạt động. Hành vi đã xong; diện mạo là của bạn và là bước tiếp theo.

Bước 4 — Tạo kiểu dáng

Tạo kiểu cho các class hook — .button, .text-input, .label, .field — trong bảng kiểu của bạn, hoặc liên kết một chủ đề dựng sẵn trong index.html / nuxt.config: 

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

Bước 5 — Xem mọi thứ hoạt động

Ứng dụng ví dụ Nuxt là toàn bộ danh mục có kiểu dáng và bản demo, cùng Playwright e2e và đường cơ sở 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

Các bước tiếp theo

Có thắc mắc trên đường đi? Trang trợ giúp có đầy câu trả lời — và nếu một bước có thể rõ ràng hơn, hãy cho chúng tôi biết và chúng tôi sẽ vui lòng cải thiện hướng dẫn.