Lily Design System™

Vue チュートリアル

型付きプロパティを持つ 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">。プロパティはほかのフレームワークと同じです: 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 を、ネストしたラベルコンポーネントではなく専用のプロパティとして受け取ります — 一度だけ渡せば、 Field、そして TextInputの対応する label がアクセシブルな名前を与えます。

2026-08-29 に確認済み: 以前の下書きでは、別の Label の中の Fieldの中にネストしていたため、 2 つの ラベル(1 つは空)が描画されていました。 Field は label プロパティ — 実際のスニペットをコンパイルして見つけました。 お問い合わせフォームの組み合わせルート も同じパターンで、本物の 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

次のステップ

途中で疑問があれば、 ヘルプページ に答えがたくさんあります。もし手順がもっと分かりやすくできるなら、 お知らせください 。喜んでチュートリアルを改善します。