Lily Design System™

Vue 튜토리얼

타입이 지정된 props를 가진 Vue 3 단일 파일 컴포넌트, defineModel 양방향 바인딩, 그리고 v-bind="$attrs" 통과 전달.

만들 것

작은 문의 폼 — 레이블이 있는 입력, 제출 버튼, v-model 바인딩, 실제 키보드 및 스크린 리더 동작 — 먼저 꾸미지 않은 상태로, 그다음 스타일을 입혀서 약 10분 안에 만듭니다.

시작하기 전에

git, Node 22 이상, pnpm 10 이상이 필요합니다. Vue 3 프로젝트라면 무엇이든 괜찮습니다 — Nuxt, Vite, 순수 Vue 모두 됩니다.

1단계 — 코드 가져오기

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

컴포넌트는 다음 위치에 평평한 파일로 있습니다: components/ — Button.vue, TextInput.vue — 각각 테스트, 스토리, 문서가 바로 옆에 있습니다. 필요한 파일을 복사하거나 저장소를 가져오세요.

2단계 — 첫 번째 컴포넌트

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

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

렌더링하는 요소: <button class="button" type="button">. props는 다른 프레임워크와 같습니다: type, disabled, pressed, label, 그 밖의 모든 특성은 폴스루됩니다.

3단계 — 작은 폼 구성하기

<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 은 보이는 label 을 중첩된 레이블 컴포넌트가 아니라 별도의 prop으로 받습니다 — 한 번만 전달하면 Field, 그리고 TextInput의 대응하는 label 이 접근 가능한 이름을 제공합니다.

2026-08-29 확인 완료: 이전 초안에서는 별도의 Label 안의 Field안에 중첩했는데, 그러면 두 개의 레이블(하나는 비어 있음)이 렌더링되었습니다. Field 가 label prop — 정확한 스니펫을 컴파일해 보다가 발견했습니다. 문의 폼 조합 라우트 도 같은 패턴이며, 실제 e2e 및 axe 테스트로 검증됩니다.

TextInput 는 다음을 쓰므로: defineModel, 일반 v-model 이 바로 동작합니다.

작동 확인: 앱을 실행하면 폼이 밋밋해 보입니다 — 의도한 대로이며 스타일은 앞으로 입힙니다. Tab키를 눌러 보세요. 포커스가 모든 컨트롤을 따라 이동하고, 레이블이 읽히며, 제출도 동작합니다. 동작은 완성되었고, 모양은 당신 몫이며 다음 단계입니다.

4단계 — 스타일 입히기

클래스 훅에 스타일을 입힙니다 — .button, .text-input, .label, .field — 스타일시트에서, 또는 준비된 테마를 다음에서 링크합니다: index.html / nuxt.config: 

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

5단계 — 전체가 동작하는 모습 보기

Nuxt 예제 앱 은 스타일과 데모를 갖춘 전체 카탈로그이며, Playwright e2e와 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

다음 단계

진행하다가 궁금한 점이 있다면 도움말 페이지 에 답이 많이 있습니다. 어떤 단계가 더 명확해질 수 있다면 알려 주세요 . 기꺼이 튜토리얼을 개선하겠습니다.