Vodič za Vue — Lily Design System

Što ćete izraditi

Mali kontaktni obrazac — polje s oznakom, gumb za slanje, v-model vezivanje, stvarno ponašanje tipkovnice i čitača zaslona — najprije golo, zatim stilizirano, za otprilike 10 minuta.

Prije nego počnete

Trebaju vam git, Node 22 ili noviji i pnpm 10 ili noviji. Odgovara bilo koji projekt Vue 3 — Nuxt, Vite ili obični Vue.

Korak 1 — Preuzmite 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

Komponente su ravne datoteke u components/ — Button.vue, TextInput.vue — svaka s vlastitim testom, storyjem i dokumentacijom uz sebe. Kopirajte potrebne datoteke ili dovucite repozitorij.

Korak 2 — Vaša prva komponenta

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

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

Iscrtava <button class="button" type="button">. Propovi odgovaraju ostalim frameworkima: type, disabled, pressed, label, plus propuštanje atributa za sve ostalo.

Korak 3 — Sastavite mali obrazac

<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 prima vidljivu label kao vlastiti prop umjesto ugniježđene komponente oznake — proslijedite je jednom, na Fieldi TextInputiz label daje pristupačno ime.

Provjereno 2026-08-29: raniji nacrt ugnijezdio je zasebnu komponentu Label unutar Field, što je iscrtalo dvije oznake (jednu praznu) jer Field već iscrtava vlastitu iz ulaza label prop — otkriveno kompiliranjem točnog isječka. Ruta Složena ruta kontaktnog obrasca isti je uzorak, isproban stvarnim e2e i axe testovima.

TextInput koristi defineModel, pa obični v-model radi odmah.

Provjerite svoj rad: pokrenite aplikaciju i obrazac izgleda golo — točno kako je zamišljeno: stiliziranje tek slijedi. Pritisnite Tab: fokus prolazi kroz svaku kontrolu, oznaka se izgovara i slanje radi. Ponašanje je gotovo; izgled je vaš i sljedeći je korak.

Korak 4 — Stilizirajte ga

Stilizirajte klasne kuke — .button, .text-input, .label, .field — u svojoj stilskoj tablici, ili povežite gotovu temu u index.html / nuxt.config:

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

Korak 5 — Pogledajte kako sve radi

Primjer aplikacija Nuxt je cijeli katalog stiliziran i demonstriran, s Playwright e2e i axe-core polaznom linijom:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-nuxt-examples
pnpm install && pnpm run dev

Sljedeći koraci

Teme — prebacivanje tijekom izvođenja pomoćnikom theme-picker za Vue.
Pomoćnici za postavke — jezik i veličina teksta.
Katalog komponenti — svojstva, ARIA i tipkovnica po komponenti.

Pitanja usput? Stranica pomoći puna je odgovora — a ako neki korak može biti jasniji, javite nam i rado ćemo poboljšati vodič.