Lily Design System™

Vue tutoriala

Vue 3 fitxategi bakarreko osagaiak propa tipatuekin, defineModel bi norabideko loturarekin eta v-bind="$attrs" pasatzearekin.

Zer eraikiko duzun

Harremanetarako formulario txiki bat — etiketadun sarrera, bidaltze-botoia, v-model lotura, teklatu eta pantaila-irakurgailu portaera erreala — lehenik biluzik, gero estilatuta, 10 minutu inguruan.

Hasi aurretik

git, Node 22 edo berriagoa eta pnpm 10 edo berriagoa behar dituzu. Edozein Vue 3 proiektuk balio du — Nuxt, Vite edo Vue soila.

1. pausoa — Lortu kodea

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

Osagaiak fitxategi lau gisa daude hemen: components/ — Button.vue, TextInput.vue — bakoitza bere proba, story eta dokumentazioarekin batera. Kopiatu behar dituzun fitxategiak, edo egin vendoring biltegiari.

2. pausoa — Zure lehen osagaia

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

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

Errendatzen du <button class="button" type="button">. Propak beste framework-ekin bat datoz: type, disabled, pressed, label, gehi gainerako guztiarentzako atributu-pasatzea.

3. pausoa — Osatu formulario txiki bat

<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 etiketa ikusgarria label bere propa gisa, etiketa-osagai habiaratu gisa baino — eman behin, Field, eta TextInput-ak label -n

2026-08-29an egiaztatua: aurreko zirriborro batek Label -ren barruan Fieldbarruan, eta honek bi etiketa errendatzen zituen (bat hutsik) zeren Field -k jada bere etiketa errendatzen baitu label propa — snippet zehatza konpilatuz atzeman zen. harremanetarako formulario konposatuaren ibilbideak patroi bera du, benetako e2e eta axe probekin erabilia.

TextInput erabiltzen du defineModel, beraz v-model soila kutxatik ateratzen den bezala funtzionatzen du.

Egiaztatu zure lana: exekutatu aplikazioa eta formularioa soila ageri da — hain zuzen nahi bezala: estiloa oraindik aurrean dago. Sakatu Tab: fokua kontrol guztietatik pasatzen da, etiketa iragartzen da eta bidalketak funtzionatzen du. Portaera prest dago; itxura zurea da eta hurrengoa da.

4. pausoa — Estilatu

Estilatu klase-gakoak — .button, .text-input, .label, .field — zure estilo-orrian, edo lotu prest dagoen gai bat hemen: index.html / nuxt.config: 

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

5. pausoa — Ikusi dena funtzionatzen

Nuxt adibide-aplikazioa katalogo osoa da estilatuta eta demostratuta, Playwright e2e eta axe-core oinarri-lerroarekin: 

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

Hurrengo pausoak

Galderarik bidean? laguntza-orriak erantzunez beteta dago — eta pauso bat argiagoa izan badaiteke, esan iezaguzu eta pozik hobetuko dugu tutoriala.