Посібник з Vue — Lily Design System

Що ви створите

Невелика контактна форма — поле з міткою, кнопка надсилання, 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">. Властивості відповідають іншим фреймворкам: 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 як власну властивість, а не вкладений компонент мітки — передайте її один раз, на Field, і TextInputу label надає доступну назву.

Перевірено 2026-08-29: ранній чернетковий варіант вкладав окремий компонент Label всередині Field, що рендерило дві мітки (одну порожню), оскільки Field уже рендерить власну з label властивість — виявлено компіляцією точного фрагмента. складений маршрут контактної форми — той самий шаблон, перевірений справжніми 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

Наступні кроки

Теми — перемикання під час виконання за допомогою допоміжного засобу Vue theme-picker.
Допоміжні засоби налаштувань — мова та розмір тексту.
Каталог компонентів — властивості, ARIA та клавіатура для кожного компонента.

Питання по дорозі? сторінка допомоги повна відповідей — а якщо якийсь крок може бути зрозумілішим, повідомте нам і ми із задоволенням покращимо посібник.