Lily Design System™

Vue-vejledning

Vue 3 enkeltfilskomponenter med typede props, defineModel tovejsbinding og v-bind="$attrs" -gennemløb.

Det her bygger du

En lille kontaktformular — felt med etiket, send-knap, v-model -binding, ægte tastatur- og skærmlæseradfærd — først nøgen, derefter formgivet, på omkring 10 minutter.

Før du går i gang

Du skal bruge git, Node 22 eller nyere og pnpm 10 eller nyere. Ethvert Vue 3-projekt virker — Nuxt, Vite eller almindelig Vue.

Trin 1 — Hent koden

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

Komponenterne er flade filer i components/ — Button.vue, TextInput.vue — hver med sin test, story og dokumentation ved siden af. Kopiér de filer, du har brug for, eller hent repoet.

Trin 2 — Din første komponent

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

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

Gengiver <button class="button" type="button">. Propsene svarer til de andre frameworks: type, disabled, pressed, label, plus attributgennemløb for alt andet.

Trin 3 — Sæt en lille formular sammen

<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 tager den synlige label som sin egen prop i stedet for en indlejret etiketkomponent — send den én gang, på Fieldog TextInputfra label giver det tilgængelige navn.

Verificeret 2026-08-29: et tidligere udkast indlejrede en separat Label inde i Field, hvilket gengiver to etiketter (en tom), fordi Field allerede gengiver sin egen fra label -prop — opdaget ved at kompilere det præcise kodeeksempel. Ruten Den sammensatte kontaktformularrute er det samme mønster, afprøvet med ægte e2e- og axe-tests.

TextInput bruger defineModel, så en almindelig v-model virker med det samme.

Tjek dit arbejde: kør appen, og formularen ser nøgen ud — præcis som tilsigtet: formgivningen kommer endnu. Tryk på Tab: fokus flytter sig gennem hver kontrol, etiketten oplæses, og afsendelse virker. Adfærden er færdig; udseendet er dit og er næste skridt.

Trin 4 — Giv den stil

Formgiv klassekrogene — .button, .text-input, .label, .field — i dit typografiark, eller link et færdigt tema i index.html / nuxt.config: 

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

Trin 5 — Se det hele virke

Nuxt eksempelapp er hele kataloget formgivet og demonstreret, med Playwright e2e og en axe-core-baseline: 

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

Næste skridt

Spørgsmål undervejs? Siden Hjælp er fuld af svar — og hvis et trin kan blive tydeligere, så fortæl os det og vi forbedrer gerne vejledningen.