README.ja-JP.md

August 2, 2026 · View on GitHub

Vant

モバイルウェブアプリ向けの軽量でカスタマイズ可能な Vue UI ライブラリ。

npm version Coverage Status downloads

ドキュメント · ドキュメント（バックアップ） · English · 中文介绍

特徴

🚀 平均コンポーネントサイズ 1KB（min+gzip）
🚀 80 種類以上の高品質コンポーネント
🚀 サードパーティ依存ゼロ
💪 90% 以上のユニットテストカバレッジ
💪 TypeScript で記述
📖 充実したドキュメントとデモ
📖 Sketch および Axure デザインリソースを提供
🍭 Vue 2 & Vue 3 対応
🍭 Nuxt 2 & Nuxt 3 対応、Nuxt 向けの Vant Module を提供
🍭 Tree Shaking 対応
🍭 カスタムテーマ対応
🍭 アクセシビリティ対応（改善中）
🍭 ダークモード対応
🍭 SSR 対応
🌍 i18n 対応、30 言語以上を内蔵

インストール

npm を使ってインストール：

# Vue 3 プロジェクト向けに最新の Vant をインストール
npm i vant

# Vue 2 プロジェクト向けに Vant 2 をインストール
npm i vant@latest-v2

yarn、pnpm、または bun を使う場合：

# yarn を使う場合
yarn add vant

# pnpm を使う場合
pnpm add vant

# Bun を使う場合
bun add vant

スキャフォールド

スキャフォールドプロジェクトの作成には Rsbuild の使用を推奨します。

Rsbuild は Rspack をベースにしたビルドツールで、Vant の作者が開発しています。優れたビルド速度と開発体験を提供し、Vant を最優先でサポートしています。

以下のコマンドで Rsbuild プロジェクトを作成できます：

npm create rsbuild@latest

詳細は Rsbuild リポジトリをご覧ください。

クイックスタート

import { createApp } from 'vue';
// 1. 必要なコンポーネントをインポート
import { Button } from 'vant';
// 2. コンポーネントのスタイルをインポート
import 'vant/lib/index.css';

const app = createApp();

// 3. 必要なコンポーネントを登録
app.use(Button);

詳細はクイックスタートを参照してください。

ブラウザサポート

Vant 2 はモダンブラウザおよび Android >= 4.0、iOS >= 8.0 をサポートしています。

Vant 3/4 はモダンブラウザおよび Chrome >= 51、iOS >= 10.0（Vue 3 と同様）をサポートしています。

公式エコシステム

プロジェクト	説明
vant-weapp	WeChat ミニプログラム UI
vant-demo	Vant デモ集
vant-cli	UI ライブラリ向けスキャフォールド
vant-icons	Vant アイコン
vant-touch-emulator	デスクトップブラウザで Vant を使用
vant-nuxt	Nuxt 向け Vant モジュール

コミュニティエコシステム

プロジェクト	説明
3lang3/react-vant	Vant をベースにした React モバイル UI コンポーネント
vant-theme	Vant UI を使ったオンラインテーマプレビュー
@antmjs/vantui	Vant をベースにしたモバイル UI コンポーネント（Taro と React 対応）
Taroify	Vant の Taro バージョン
vant-playground	Vant プレイグラウンド
sfc-playground-vant	Vant プレイグラウンド
vue3-h5-template	Vant をベースにしたモバイルプロジェクトテンプレート
vue3-vant-mobile	Vant をベースにしたモバイルプロジェクトテンプレート（すぐに使える）
vscode-common-intellisense	Vant 開発者向けの優れた IntelliSense を提供する VS Code 拡張機能
nuxt-vant-mobile	Vant をベースにした Nuxt 4 モバイルプロジェクトテンプレート（すぐに使える）
mobvue	丁寧に作られたモバイルウェブアプリテンプレート