Návod pro Vue — Lily Design System

Co vytvoříte

Malý kontaktní formulář — pole se štítkem, tlačítko odeslat, v-model vazba, skutečné chování klávesnice a čtečky obrazovky — nejprve holý, potom ostylovaný, zhruba za 10 minut.

Než začnete

Potřebujete git, Node 22 nebo novější a pnpm 10 nebo novější. Hodí se jakýkoli projekt Vue 3 — Nuxt, Vite nebo čisté Vue.

Krok 1 — Získejte kód

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

Komponenty jsou ploché soubory v components/ — Button.vue, TextInput.vue — každá s vlastním testem, story a dokumentací po boku. Zkopírujte potřebné soubory, nebo si repozitář vezměte.

Krok 2 — Vaše první komponenta

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

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

Vykresluje <button class="button" type="button">. Props odpovídají ostatním frameworkům: type, disabled, pressed, label, plus propouštění atributů pro vše ostatní.

Krok 3 — Sestavte malý formulář

<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 přijímá viditelný label jako vlastní prop místo vnořené komponenty štítku — předejte ho jednou, u Fielda TextInputz label dodá přístupný název.

Ověřeno 2026-08-29: dřívější koncept vnořoval samostatnou komponentu Label uvnitř Field, což vykreslilo dva štítky (jeden prázdný), protože Field už vykresluje svůj vlastní ze vstupu label prop — zjištěno kompilací přesné ukázky. Trasa Složená trasa kontaktního formuláře je stejný vzor, prověřený skutečnými testy e2e a axe.

TextInput používá defineModel, takže obyčejné v-model funguje hned.

Zkontrolujte svou práci: spusťte aplikaci a formulář vypadá holě — přesně jak bylo zamýšleno: stylování teprve přijde. Stiskněte Tab: fokus prochází každým ovládacím prvkem, štítek se oznamuje a odeslání funguje. Chování je hotové; vzhled je váš a je další na řadě.

Krok 4 — Ostylujte ho

Ostylujte třídní háčky — .button, .text-input, .label, .field — ve svém stylopisu, nebo připojte hotové téma v index.html / nuxt.config:

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

Krok 5 — Podívejte se, jak to celé funguje

Ukázková aplikace Nuxt je celý katalog ostylovaný a předvedený, s Playwright e2e a základní linií 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

Další kroky

Témata — přepínání za běhu pomocníkem theme-picker pro Vue.
Pomocníci pro předvolby — jazyk a velikost textu.
Katalog komponent — vlastnosti, ARIA a klávesnice pro každou komponentu.

Otázky cestou? Stránka nápovědy je plná odpovědí — a pokud by nějaký krok mohl být jasnější, dejte nám vědět a návod rádi vylepšíme.