Vuetifyとは？導入方法や主要コンポーネントの紹介【Vue.js】
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Vue.js で使える UI フレームワークである Vuetify について解説をします。
自分は、以下の教材で Vuetify を知り、そこで UI コンポーネントの使い方に慣れました。
Vue.js + Firebase で作るシングルページアプリケーション
Vuetify とは？
Vuetify は、Vue.js のための人気の UI フレー ムワークです。
Vuetify は Google のマテリアルデザインガイドラインに基づいており、簡単なコードで綺麗なデザインや動きのあるサービスを作ることができます。
そして、カスタマイズもすることができ、とても便利なツールです。
UI フレームワークとは？
UI フレームワークは、ユーザーインターフェース（UI）を効率的に作成するためのツールやライブラリの集まりです。
例えば、
- ボタン
- フォーム
- ナビゲーションメニュー
- モーダルウィンドウ
など、ウェブやモバイルアプリケーションで頻繁に使用されるものの実装を助けてくれます。
開発者は、これを利用し手作業で UI を作成する手間を減らして、アプリケーションのデザインやユーザー体験を素早く向上させることができます。
その他の UI フレームワーク
- BootstrapVue(Vue)
- Material UI(React)
- Chakra UI(React)
など、他にも UI フレームワークはあります。
Vue3 に対応されました
Vuetify は、Vue2 と Vue3 によって、見るべきドキュメントが異なりますので注意が必要です。
Vuetify2 は Vue2、Vuetify3 は Vue3 に対応しているので自分の環境に合ったものを選択する必要があります。
Vuetify の導入方法
インストールして設定すれば様々なプロジェクトで使えますが、プロジェクトによって導入方法が異なります。
Nuxt3 の場合
すでに Nuxt3 のプロジェクトが開始されている前提です。
コマンドで、必要なものをインストールします。
npm i -D vuetify vite-plugin-vuetify
npm i @mdi/fontnuxt.config.ts に追記
// https://nuxt.com/docs/api/configuration/nuxt-config
import vuetify, { transformAssetUrls } from "vite-plugin-vuetify" //追記
export default defineNuxtConfig({
compatibilityDate: "2024-04-03",
devtools: { enabled: true },
//以下を追記
build: {
transpile: ["vuetify"],
},
modules: [
(_options, nuxt) => {
nuxt.hooks.hook("vite:extendConfig", config => {
// @ts-expect-error
config.plugins.push(vuetify({ autoImport: true }))
})
},
//...
],
vite: {
vue: {
template: {
transformAssetUrls,
},
},
},
})vuetify.ts を作成する
plugins/vuetify.tsというファイルを作成し、以下のように書きます。
plugins ディレクトリがない場合はルートディレクトリ配下に作成します。
// import this after install `@mdi/font` package
import "@mdi/font/css/materialdesignicons.css"
import "vuetify/styles"
import { createVuetify } from "vuetify"
export default defineNuxtPlugin(app => {
const vuetify = createVuetify({
// ... your configuration
})
app.vueApp.use(vuetify)
})この処理は、Vuetify の初期化が行われており、plugins ディレクトリに配置されたプラグインは、Nuxt の起動時に自動的に読み込まれます。
<v-app>で囲む
Vuetify を使いたい場所を、このコンポーネントで挟まないと Vuetify は使うことができません。
例えばこのように、app.vueに全体を wrap するように v-app コンポーネントで挟むようにしておくことで、各ページで使えるようになります。
<template>
<v-app>
<Header />
<NuxtPage />
<Footer />
</v-app>
</template>以上が Nuxt3 での導入方法です。
Laravel の場合
Inertia などですでに Vue3 が Vite で稼働しているところから始めます。
コマンドで必要なものをインストール
npm i vuetify
npm i @mdi/fontapp.js に追記
resources/js/app.jsに追記します。
import { createApp, h } from "vue"
import { createInertiaApp } from "@inertiajs/vue3"
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"
import { ZiggyVue } from "../../vendor/tightenco/ziggy"
// 追記
import "@mdi/font/css/materialdesignicons.css"
import "vuetify/styles"
import { createVuetify } from "vuetify"
import * as components from "vuetify/components"
import * as directives from "vuetify/directives"
const vuetify = createVuetify({
components,
directives,
})
// 追記ここまで、下のuseのところにもう１箇所あります
const appName = import.meta.env.VITE_APP_NAME || "Laravel"
createInertiaApp({
title: title => `${title} - ${appName}`,
resolve: name =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(vuetify) // ← 追記
.use(plugin)
.use(ZiggyVue)
.mount(el)
},
progress: {
color: "#4B5563",
},
})<v-app></v-app>で囲う
Vuetify を使うためには、<v-app></v-app>で囲う必要があります。
ですので、以下のように使いたい場所を囲って使用します。
resouces/js/Layouts/AppLayout.vue
<template>
<main>
<v-app>
<slot />
</v-app>
</main>
</template>実装してみる
カローセル
カローセル(carousel)は横スライドなどしたい時に使います
Gif のような横スライドを実装してみます。
<script setup>
import { ref, onMounted } from "vue"
const slides = ref(["First", "Second", "Third", "Fourth", "Fifth"])
const colors = ref([
"indigo",
"warning",
"pink darken-2",
"red lighten-1",
"deep-purple accent-4",
])
</script>
<template>
<v-carousel height="400" show-arrows="hover" cycle hide-delimiter-background>
<v-carousel-item v-for="(slide, i) in slides" :key="i">
<v-sheet :color="colors[i]" height="100%">
<div class="d-flex fill-height justify-center align-center">
<div class="text-h2">{{ slide }} Slide</div>
</div>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>暗号だらけじゃないか！と思った人もいるかもしれませんが、これは公式のドキュメントからコピーしてきただけのコードです。
自分の気に入ったものが見つかったらそのコードをコピペして持ってくると実装することができます。
コードのマークをクリックします。
表示されたコードをコピペで実装が可能ですが、Template 内に変数がある場合 、Script も確認して変数もコピペしないと動きません。
以上が実装する流れとなります。
モーダルウインドウ（ダイアログ）
ボタンをクリックしたらダイアログを表示してくれる機能です。
<template>
<v-dialog v-model="dialog">
ここにテキストとかdivタグで自由にかける
</v-dialog>
</template>
<script>
export default {
return {
data(){
dialog: false //Trueにすると開く
}
}
}
</script>別記事にもう少し詳しく書きました。
メニューバー
メニューバーもすぐに実装できます。
後述のナビゲーションバーにも出てきます。
<v-app-bar :elevation="2">
<template v-slot:prepend>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
</template>
<v-app-bar-title>Application Bar</v-app-bar-title>
</v-app-bar>ナビゲーション（サイドバー）
drawer の True と False を切り替えるだけで開閉できます。
<template>
<v-app>
<v-card>
<v-layout>
<v-app-bar color="primary" prominent>
<v-app-bar-nav-icon
variant="text"
@click.stop="drawer = !drawer"
></v-app-bar-nav-icon>
<v-toolbar-title>My files</v-toolbar-title>
<v-spacer></v-spacer>
<template v-if="$vuetify.display.mdAndUp">
<v-btn icon="mdi-magnify" variant="text"></v-btn>
<v-btn icon="mdi-filter" variant="text"></v-btn>
</template>
<v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
</v-app-bar>
<v-navigation-drawer
v-model="drawer"
:location="$vuetify.display.mobile ? 'bottom' : undefined"
temporary
>
<v-list :items="items"></v-list>
</v-navigation-drawer>
<v-main style="height: 500px">
<v-card-text>
The navigation drawer will appear from the bottom on smaller size
screens.
</v-card-text>
</v-main>
</v-layout>
</v-card>
</v-app>
</template>
<script>
export default {
data: () => ({
drawer: false,
group: null,
items: [
{
title: "Foo",
value: "foo",
},
{
title: "Bar",
value: "bar",
},
{
title: "Fizz",
value: "fizz",
},
{
title: "Buzz",
value: "buzz",
},
],
}),
watch: {
group() {
this.drawer = false
},
},
}
</script>ボタンやアイコン
とても便利です。
<v-btn depressed color="primary">
Primary
</v-btn>カスタマイズ方法
便利なモーダルウィンドウを例に、カスタマイズをする方法について紹介します。
上記のページには、サンプルとなるコードが沢山ありますが、コンポーネント の詳細について書かれたページへのリンクがあります。
飛んだ先のページには、カスタマイズ用の props の一覧などが書かれています。
例えば、ここにmin-width string | numberと書かれていれば、
<v-dialog :min-width="500"> </v-dialog>fullscreen booleanと書かれていれば
<v-dialog fullscreen></v-dialog>
または、
<v-dialog :fullscreen="true"></v-dialog>と書くことで、初期設定を変更し、カスタマイズすることができます。
これは、各コンポーネントに用意されており、そのコンポーネント用の API ページで確認して使います。
まとめ
コード部分が長いので記事的には長くなってしまいました。
誰かの役に立てれば幸いです。
