Lily Design System™

Vue-opas

Vue 3 -yhden tiedoston komponentit tyypitetyillä propeilla, defineModel kaksisuuntainen sidonta ja v-bind="$attrs" -läpivienti.

Mitä rakennat

Pieni yhteydenottolomake — nimiöity kenttä, lähetyspainike, v-model -sidonta, aito näppäimistö- ja ruudunlukijakäyttäytyminen — ensin paljaana, sitten tyylitellen, noin 10 minuutissa.

Ennen kuin aloitat

Tarvitset gitin, Node 22:n tai uudemman ja pnpm 10:n tai uudemman. Mikä tahansa Vue 3 -projekti kelpaa — Nuxt, Vite tai pelkkä Vue.

Vaihe 1 — Hae koodi

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

Komponentit ovat litteitä tiedostoja hakemistossa components/ — Button.vue, TextInput.vue — kullakin on testinsä, storynsa ja dokumentaationsa vieressään. Kopioi tarvitsemasi tiedostot tai tuo repo mukaan.

Vaihe 2 — Ensimmäinen komponenttisi

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

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

Renderöi <button class="button" type="button">. Propit vastaavat muita kehyksiä: type, disabled, pressed, label, sekä attribuuttien läpivienti kaikelle muulle.

Vaihe 3 — Kokoa pieni lomake

<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 ottaa näkyvän label omana proppinaan sisäkkäisen nimiökomponentin sijaan — välitä se kerran elementille Fieldja TextInputelementistä label antaa saavutettavan nimen.

Varmistettu 2026-08-29: aiempi luonnos sijoitti erillisen Label sisällä Fieldsisään, mikä renderöi kaksi nimiötä (toinen tyhjä), koska Field renderöi jo oman nimiönsä label -prop — havaittu kääntämällä täsmällinen koodinpätkä. Reitti Koottu yhteydenottolomakkeen reitti on sama malli, jota on koeteltu oikeilla e2e- ja axe-testeillä.

TextInput käyttää defineModel, joten pelkkä v-model toimii sellaisenaan.

Tarkista työsi: käynnistä sovellus, ja lomake näyttää paljaalta — juuri niin kuin on tarkoitus: tyylittely on vielä edessä. Paina Tab: kohdistus liikkuu jokaisen ohjaimen läpi, nimiö ilmoitetaan ja lähettäminen toimii. Toiminta on valmis; ulkoasu on sinun ja seuraava vaihe.

Vaihe 4 — Tyylittele se

Tyylittele luokkakoukut — .button, .text-input, .label, .field — tyylitiedostossasi, tai linkitä valmis teema tiedostossa index.html / nuxt.config: 

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

Vaihe 5 — Katso kaiken toimivan

Nuxt-esimerkkisovellus on koko luettelo tyyliteltynä ja esiteltynä, Playwright e2e:llä ja axe-core-lähtötasolla: 

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

Seuraavat askeleet

Kysymyksiä matkan varrella? Ohjesivu on täynnä vastauksia — ja jos jokin vaihe voisi olla selkeämpi, kerro meille ja parannamme opasta mielellämme.