Vue UIライブラリ比較｜6種で同じ画面を作りサイズを実測

Vue UIライブラリとは、ボタン・入力欄・表・ダイアログなどの画面部品をまとめて提供し、見た目と操作感のそろった画面を速く作るためのライブラリです。 代表的なものに Vuetify、PrimeVue、Element Plus、Quasar、Nuxt UI、Naive UI があり、それぞれ得意な場面が違います。

この記事では、2026年9月28日時点の最新版（Vuetify 4.2.2、PrimeVue 5.0.1、Element Plus 2.14.6、Quasar 2.33.2、Nuxt UI 4.11.2、Naive UI 2.45.3）で「入力フォーム＋データテーブル＋ダイアログ」という同じ画面を実際に作り、Vite 8.3.1 でビルドしたJS/CSSのサイズ（gzip）を測りました。さらに「全部まとめて登録」と「使う部品だけ読み込む」でサイズがどう変わるか、Playwright で画面操作が通るかも確認しています。目的別の選び方フローと、コピペで動く最小コードもまとめました。

Vue UIライブラリ比較の早見表

※1 本記事でパッケージ内のエクスポートやファイルを数えた値です。子部品を含むため目安としてご覧ください。
※2 npm の公開履歴から、2026-03-29〜09-28 の安定版の数を数えました。
※3 PrimeVue 5 から「PrimeUIライセンス」になりました（4.x は MIT のまま）。詳しくは後述の「PrimeVue 5 のライセンスと導入時の確認」をご覧ください。

同じ画面を作ってビルドサイズを実測した結果

同じ画面でも、ライブラリと「読み込み方」によってJS+CSSのサイズは約120KB〜約390KB（gzip）まで変わりました。 そして、全部登録から「使う部品だけ」に切り替えると、41〜61%小さくなりました。

検証の条件

計測結果（gzip、小さい順）

Playwright の実行ログ（抜粋）です。10構成すべてで操作が通りました。

plain: 追加OK / ダイアログ表示OK / 閉じるOK
vuetify-full: 追加OK / ダイアログ表示OK / 閉じるOK
primevue: 追加OK / ダイアログ表示OK / 閉じるOK
    warning: [PrimeUI] PrimeUI license is not configured.
element-auto: 追加OK / ダイアログ表示OK / 閉じるOK
nuxtui: 追加OK / ダイアログ表示OK / 閉じるOK
    error: Failed to load resource: net::ERR_TUNNEL_CONNECTION_FAILED
（ほかの5構成も同じく3操作OK）

2つのメッセージは、この後の「つまずきやすいポイント」で理由と対処を説明します。

結果の読み取り方

• 差を生む一番の要因は「全部登録」か「使う分だけ」かです。Element Plus は 364.37 kB → 141.26 kB（61.2%減）、Naive UI は 387.17 kB → 165.93 kB（57.1%減）、Vuetify は 314.72 kB → 183.36 kB（41.7%減）でした。
• ライブラリどうしの差は、使う分だけにそろえると約120〜190 kB の範囲に収まりました。1画面だけの小さな検証なので、部品を増やしたときの伸び方は構成によって変わります。
• 値にはVue本体（素のVueで26.23 kB）が含まれます。ライブラリ分は約26 kB を引いてください。
• PrimeVue と Naive UI はスタイルをJSの中で生成する方式なので、CSSファイルが出ません。その分がJSの値に含まれます。
• 全部登録の構成では、Vite が「500 kB を超えるチャンク」の警告を出しました（後述）。

個別インポートでサイズを小さくする方法

多くのライブラリは、Viteプラグインか resolver を入れるだけで「テンプレートに書いた部品だけ」を自動で読み込めます。 コードの書き方はほぼ変わりません。

今回使った Vite の設定です（1つの設定ファイルを環境変数で切り替えています）。

// vite.config.ts（vite 8.3.1）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ui from '@nuxt/ui/vite'

const APP = process.env.APP!
const plugins: any[] = []
if (APP === 'quasar') {
  plugins.push(vue({ template: { transformAssetUrls } }), quasar())
} else {
  plugins.push(vue())
}
if (APP === 'vuetify-auto') plugins.push(vuetify({ autoImport: true }))
if (APP === 'element-auto') plugins.push(Components({ resolvers: [ElementPlusResolver()], dts: false }))
if (APP === 'nuxtui') plugins.push(ui())

export default defineConfig({
  root: `apps/${APP}`,
  plugins,
  build: { outDir: `../../dist/${APP}`, emptyOutDir: true },
})

# 例：Element Plus の「使う分だけ」版をビルド
APP=element-auto npx vite build

ポイントは、package.json に "type": "module" を入れておくことです。入れずに実行すると、次の「つまずきやすいポイント」にあるエラーになりました。

目的別の選び方フロー

迷ったら「Nuxtを使うか」「Tailwind CSSを使うか」「どんな画面が中心か」の3つで絞ると決めやすくなります。

flowchart TD
    A[Vue UIライブラリを選ぶ] --> B{Nuxtで作る?}
    B -- はい --> C{Tailwind CSSを使う?}
    C -- はい --> D[Nuxt UI / shadcn-vue]
    C -- いいえ --> E[Vuetify / PrimeVue / Element Plus]
    B -- いいえ（Vue + Vite） --> F{画面の中心は?}
    F -- 表・入力が多い業務画面 --> G[Element Plus / PrimeVue / Vuetify]
    F -- スマホ・PWA・デスクトップも --> H[Quasar]
    F -- 部品を自分で改造したい --> I[shadcn-vue]
    F -- TypeScript中心で軽く導入 --> J[Naive UI]

インストールから最小コードまでのコピペ集

ここのコードは、すべて今回のビルドとPlaywrightの確認に使ったものです（shadcn-vue のみ未実行）。各 <script setup> には次の共通コードを書いています。

// 各 App.vue の <script setup lang="ts"> に共通で書いたコード
import { ref } from 'vue'

const name = ref('')
const category = ref('備品')
const categories = ['備品', '書籍', 'その他']
const rows = ref([
  { id: 1, name: 'ノートPC', category: '備品' },
  { id: 2, name: 'Vue入門', category: '書籍' },
  { id: 3, name: 'ホワイトボード', category: '備品' },
])
const open = ref(false)

function add() {
  if (!name.value) return
  rows.value = [...rows.value, { id: rows.value.length + 1, name: name.value, category: category.value }]
  name.value = ''
}

Vuetify 4

npm i vuetify
npm i -D vite-plugin-vuetify

// main.ts（vite.config.ts で vuetify({ autoImport: true }) を登録）
import { createApp } from 'vue'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import App from './App.vue'

createApp(App).use(createVuetify()).mount('#app')

<script setup lang="ts">
// 共通コード（上記）＋列定義
const headers = [
  { title: 'ID', key: 'id' },
  { title: '名前', key: 'name' },
  { title: 'カテゴリ', key: 'category' },
]
</script>

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-form @submit.prevent="add">
          <v-text-field v-model="name" label="名前" placeholder="名前を入力" />
          <v-select v-model="category" :items="categories" label="カテゴリ" />
          <v-btn type="submit" color="primary">追加</v-btn>
        </v-form>
        <v-data-table :headers="headers" :items="rows" />
        <v-btn @click="open = true">詳細を開く</v-btn>
        <v-dialog v-model="open" max-width="400">
          <v-card title="確認" text="ダイアログの本文です">
            <v-card-actions><v-btn @click="open = false">閉じる</v-btn></v-card-actions>
          </v-card>
        </v-dialog>
      </v-container>
    </v-main>
  </v-app>
</template>

PrimeVue 5

npm i primevue @primeuix/themes

// main.ts
import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura'
import App from './App.vue'

createApp(App).use(PrimeVue, { theme: { preset: Aura } }).mount('#app')

<script setup lang="ts">
import InputText from 'primevue/inputtext'
import Select from 'primevue/select'
import Button from 'primevue/button'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import Dialog from 'primevue/dialog'
// 共通コード（上記）
</script>

<template>
  <form @submit.prevent="add">
    <InputText v-model="name" placeholder="名前を入力" />
    <Select v-model="category" :options="categories" />
    <Button type="submit" label="追加" />
  </form>
  <DataTable :value="rows">
    <Column field="id" header="ID" />
    <Column field="name" header="名前" />
    <Column field="category" header="カテゴリ" />
  </DataTable>
  <Button label="詳細を開く" @click="open = true" />
  <Dialog v-model:visible="open" header="確認" modal>
    <p>ダイアログの本文です</p>
    <Button label="閉じる" @click="open = false" />
  </Dialog>
</template>

Element Plus

npm i element-plus
npm i -D unplugin-vue-components

// main.ts（「使う分だけ」版。部品とCSSは ElementPlusResolver が自動で読み込む）
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

<script setup lang="ts">
import ja from 'element-plus/es/locale/lang/ja'
// 共通コード（上記）
</script>

<template>
  <el-config-provider :locale="ja">
    <el-form label-width="auto" @submit.prevent="add">
      <el-form-item label="名前"><el-input v-model="name" placeholder="名前を入力" /></el-form-item>
      <el-form-item label="カテゴリ">
        <el-select v-model="category"><el-option v-for="c in categories" :key="c" :label="c" :value="c" /></el-select>
      </el-form-item>
      <el-button type="primary" native-type="submit">追加</el-button>
    </el-form>
    <el-table :data="rows">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="名前" />
      <el-table-column prop="category" label="カテゴリ" />
    </el-table>
    <el-button @click="open = true">詳細を開く</el-button>
    <el-dialog v-model="open" title="確認" width="400">
      <p>ダイアログの本文です</p>
      <el-button @click="open = false">閉じる</el-button>
    </el-dialog>
  </el-config-provider>
</template>

Quasar（Vite プラグイン）

npm i quasar @quasar/extras
npm i -D @quasar/vite-plugin sass-embedded

// main.ts（vite.config.ts で vue({ template: { transformAssetUrls } }) と quasar() を登録）
import { createApp } from 'vue'
import { Quasar } from 'quasar'
import langJa from 'quasar/lang/ja'
import 'quasar/src/css/index.sass'
import App from './App.vue'

createApp(App).use(Quasar, { lang: langJa }).mount('#app')

<script setup lang="ts">
// 共通コード（上記）＋列定義
const columns = [
  { name: 'id', label: 'ID', field: 'id', align: 'left' as const },
  { name: 'name', label: '名前', field: 'name', align: 'left' as const },
  { name: 'category', label: 'カテゴリ', field: 'category', align: 'left' as const },
]
</script>

<template>
  <div class="q-pa-md">
    <q-form @submit="add">
      <q-input v-model="name" label="名前" placeholder="名前を入力" outlined />
      <q-select v-model="category" :options="categories" label="カテゴリ" outlined />
      <q-btn type="submit" color="primary" label="追加" />
    </q-form>
    <q-table :rows="rows" :columns="columns" row-key="id" />
    <q-btn label="詳細を開く" @click="open = true" />
    <q-dialog v-model="open">
      <q-card>
        <q-card-section>ダイアログの本文です</q-card-section>
        <q-card-actions><q-btn flat label="閉じる" @click="open = false" /></q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

Nuxt UI 4（Nuxtを使わないVue + Viteで）

Nuxt UI は Nuxt 専用ではなく、Vue + Vite でも使えます。 公式の Vue 向け手順どおり、Vite プラグイン @nuxt/ui/vite と Vue プラグイン @nuxt/ui/vue-plugin を登録します。

npm i @nuxt/ui tailwindcss vue-router

/* main.css */
@import "tailwindcss";
@import "@nuxt/ui";

// main.ts（vite.config.ts で ui() を登録。index.html の <div id="app"> に class="isolate"）
import './main.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const router = createRouter({ routes: [], history: createWebHistory() })
createApp(App).use(router).use(ui).mount('#app')

<script setup lang="ts">
// 共通コード（上記）＋列定義（TanStack Table 形式）
const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: '名前' },
  { accessorKey: 'category', header: 'カテゴリ' },
]
</script>

<template>
  <UApp>
    <form class="flex gap-2 p-4" @submit.prevent="add">
      <UFormField label="名前"><UInput v-model="name" placeholder="名前を入力" /></UFormField>
      <UFormField label="カテゴリ"><USelect v-model="category" :items="categories" class="w-40" /></UFormField>
      <UButton type="submit" label="追加" />
    </form>
    <UTable :data="rows" :columns="columns" />
    <UModal v-model:open="open" title="確認">
      <UButton label="詳細を開く" />
      <template #body>
        <p>ダイアログの本文です</p>
        <UButton label="閉じる" @click="open = false" />
      </template>
    </UModal>
  </UApp>
</template>

vue-router なしなら ui({ router: false }) も選べます（型定義で確認）。

Naive UI

npm i naive-ui

<script setup lang="ts">
import { NConfigProvider, NForm, NFormItem, NInput, NSelect, NButton, NDataTable, NModal } from 'naive-ui'
// 共通コード（上記）＋選択肢と列定義
const options = categories.map((c) => ({ label: c, value: c }))
const columns = [
  { title: 'ID', key: 'id' },
  { title: '名前', key: 'name' },
  { title: 'カテゴリ', key: 'category' },
]
</script>

<template>
  <n-config-provider>
    <n-form @submit.prevent="add">
      <n-form-item label="名前"><n-input v-model:value="name" placeholder="名前を入力" /></n-form-item>
      <n-form-item label="カテゴリ"><n-select v-model:value="category" :options="options" /></n-form-item>
      <n-button type="primary" attr-type="submit">追加</n-button>
    </n-form>
    <n-data-table :columns="columns" :data="rows" />
    <n-button @click="open = true">詳細を開く</n-button>
    <n-modal v-model:show="open" preset="card" title="確認" style="width: 400px">
      <p>ダイアログの本文です</p>
      <n-button @click="open = false">閉じる</n-button>
    </n-modal>
  </n-config-provider>
</template>

main.ts は createApp(App).mount('#app') だけで動きます。

shadcn-vue（未実行）

shadcn-vue は npm パッケージを読み込むのではなく、部品のソースコードを自分のプロジェクトにコピーする方式です。Tailwind CSS と Reka UI が前提になります。本記事では実行していないため、公式ドキュメントの手順を確認してから導入してください。

# 公式ドキュメントの手順（本記事では未実行）
npx shadcn-vue@latest init
npx shadcn-vue@latest add button dialog table

日本語化（i18n）の設定

日付選択やページ送りなど、部品の中に出る文言は各ライブラリの言語設定で日本語にできます。 Vuetify・Element Plus・Quasar・Nuxt UI・Naive UI は日本語の言語データを同梱しています（ファイルの存在を確認済み）。

Nuxtで使う場合のモジュール

Nuxt では各ライブラリ用のモジュールで、部品の自動インポートやSSR向け設定をまとめて任せられます。

PrimeVue 5 のライセンスと導入時の確認

PrimeVue 5.0.0（2026年7月公開）から、ライセンスが MIT から「PrimeUIライセンス」に変わりました。 公式の移行ガイドでは、4.x からのアップグレードで公開APIの破壊的変更はないと案内されています。導入前に、次の点を確認しておくと安心です。

実際にキーを設定せずに動かすと、画面の操作はすべて通り、ブラウザのコンソールに次の警告が出ました。

warning: [PrimeUI] PrimeUI license is not configured.

キーは app.use(PrimeVue, { license: '...' }) の license オプションで渡します（型定義で確認）。条件や価格は変わることがあるため、採用を決める前に公式サイトの最新の条件を確認し、チームで合意しておくとスムーズです。

つまずきやすいポイントと対処

今回の検証で実際に出たメッセージと、その直し方です。

よくある質問

Q. 結局どれが一番おすすめですか？ A. 画面の種類とチームの前提で変わります。Nuxt と Tailwind CSS なら Nuxt UI、表と入力が多い業務画面なら Element Plus・PrimeVue・Vuetify、スマホアプリやデスクトップまで1つのコードで作るなら Quasar が候補になります。候補を2つに絞ったら、本記事のように同じ画面を作って比べるのが確実です。

Q. Nuxt UI は Nuxt がなくても使えますか？ A. 使えます。@nuxt/ui/vite と @nuxt/ui/vue-plugin を登録すれば Vue + Vite で動き、本記事でもビルドと操作を確認しました。Tailwind CSS 4 が前提で、アイコンは実行時に Iconify API から取得される点を覚えておくと安心です。

Q. バンドルサイズはどれくらい気にすべきですか？ A. まず「使う分だけ」の設定にすることが大切です（今回41〜61%の差）。ライブラリ間の差（約120〜190 kB）は、部品数や機能と合わせて判断するとよいでしょう。

まとめ

• Vue UIライブラリは、部品の多さ・デザイン・Nuxt対応・ライセンスで向いている場面が分かれます。
• 同じ画面でも、全部登録から「使う分だけ」にすると41〜61%小さくなりました（Element Plus 364.37 kB → 141.26 kB）。
• 使う分だけにそろえると、6ライブラリは約120〜190 kB（gzip、Vue本体込み）に収まりました。
• Nuxt UI は Vue + Vite でも使え、Nuxt では公式モジュールとして最も手軽に導入できます。
• PrimeVue 5 は PrimeUIライセンスです。条件を確認してから採用を決めましょう（4.x は MIT）。
• 日本語化は言語設定1〜2行で対応できます。
• 迷ったら候補を2つに絞り、自分の画面で作って測るのが確実です。

株式会社RJCでは、画面づくりに合ったライブラリを選び、実際に作って比べる進め方を、プロジェクトの中で仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。