Tutorja tal-Vue — Lily Design System

X'se tibni

Formola żgħira ta' kuntatt — qasam b'tikketta, buttuna biex tibgħat, v-model rbit, mġiba vera tat-tastiera u tal-qarrej tal-iskrin — l-ewwel għarwiena, imbagħad bi stil, f'madwar 10 minuti.

Qabel ma tibda

Għandek bżonn git, Node 22 jew iktar ġdid, u pnpm 10 jew iktar ġdid. Kwalunkwe proġett Vue 3 jaħdem — Nuxt, Vite jew Vue sempliċi.

Pass 1 — Ġib il-kodiċi

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

Il-komponenti huma fajls ċatti fi components/ — Button.vue, TextInput.vue — kull wieħed bit-test, l-istory u d-dokumentazzjoni tiegħu maġenbu. Ikkopja l-fajls li teħtieġ, jew ġib ir-repożitorju.

Pass 2 — L-ewwel komponent tiegħek

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

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

Jirrendi <button class="button" type="button">. Il-props jaqblu mal-frameworks l-oħra: type, disabled, pressed, label, flimkien ma' għoli tal-attributi għal kull ħaġa oħra.

Pass 3 — Ikkomponi formola żgħira

<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 jieħu l- label bħala prop tiegħu stess minflok komponent ta' tikketta mdaħħal — għaddiha darba, fuq Fieldu TextInputkorrispondenti ta' label jipprovdi l-isem aċċessibbli.

Ivverifikat fl-2026-08-29: abbozz preċedenti daħħal komponent Label ġewwa Field, li rrendi żewġ tikketti (waħda vojta) għax Field diġà jirrendi tiegħu stess mill-input label prop — skopert billi ġie kkompilat is-snippet eżatt. Ir-rotta Ir-rotta komposta tal-formola ta' kuntatt hija l-istess mudell, ittestjat b'testijiet e2e u axe veri.

TextInput juża defineModel, allura v-model sempliċi jaħdem minnufih.

Iċċekkja x-xogħol tiegħek: mexxi l-app u l-formola tidher għarwiena — eżattament kif intenzjonat: l-istil għad irid jiġi. Agħfas Tab: il-focus jgħaddi minn kull kontroll, it-tikketta tiġi mħabbra u l-ibgħat jaħdem. Il-mġiba lesta; id-dehra hija tiegħek u hija l-pass li jmiss.

Pass 4 — Agħtiha stil

Agħti stil lill-ganċijiet tal-klassi — .button, .text-input, .label, .field — fl-istylesheet tiegħek, jew evita tema lesta fi index.html / nuxt.config:

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

Pass 5 — Ara kollox jaħdem

L-app eżempju Nuxt hija l-katalogu sħiħ bi stil u murija, b'Playwright e2e u linja bażi 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

Passi li jmiss

Temi — bdil waqt it-tħaddim bl-għajnuna theme-picker għal Vue.
Għajnuniet tal-preferenzi — lingwa u daqs tat-test.
Katalogu tal-komponenti — proprjetajiet, ARIA u tastiera għal kull komponent.

Mistoqsijiet matul it-triq? Il-paġna tal-għajnuna hija mimlija tweġibiet — u jekk pass jista' jkun iktar ċar, għidilna u nħossuna kuntenti ntejbu t-tutorja.