Vueを使い始めてUIライブラリを探すと色々出てきますね。PrimeVue、BootstrapVue、Quasar、Buefyなど他にも選択肢はあります。今日はそのうちでも人気のVuetifyのインストールから基本的な使い方まで説明します。
Vue3の良いところ
VueはReactと比べて初心者向けという位置づけで認識されがちです。しかし機能的にはReactに劣らず、書くコードの数も減ることがよくあります。個人的な意見になりますが、ReactのようにFacebookのような大企業のブランドがバックアップしていないというだけでマーケティングで負けてしまったように受けられます。
Vueは素晴らしいフレームワークで仕事でReactに縛られるという事がなければVueを使っていくべきだと思います。
なぜVuetify
①無料で使える
Vuetifyはソースコードを公開しているオープンソースになります。MITライセンスなので安心して商用で使えます。必要があればソースコードをいじることもOKです。
②フレキシブルなコンポーネント
コンポーネントのカスタマイズがしやすいように作られているため個性を出しやすいです。また、Googleのマテリアルデザインをテーマに作成されているのでスッキリとした見た目でデザインができます。
③ツールが豊富
FigmaのUIコンポーネントキットが使えます。（Figmaの使い方はこちら）
Viteのビルドツールで作成されたVueにVuetifyを実装できます。
TypeScriptとJavaScriptの両方で使えます。
もし、わからに事があればDiscordのコミュニティに参加して質問ができる。などなど
ViteでVueプロジェクトの作成
今回はVue CLIではなくViteを使います。Viteがスタンダードになってきているので是非使ってください。
yarnを使ってインストールする場合は次の記事を見てください。
npm create vite@latest ✔ Project name: … vuetify-app ✔ Select a framework: › Vue ✔ Select a variant: › JavaScript Scaffolding project in /home/dan/Documents/public/vuetify-app... Done. Now run: cd vuetify-app npm install npm run dev
アプリ名は自分の好きなものを付けてください。
ではプロジェクトフォルダに移動してライブラリをインストールします。
cd vuetify-app/ npm i
YarnでVuetifyをインストール
yarnを使っている人は下記のコマンドで一発でVueとVuetifyがインストールできます。
yarn create vuetify
##結果
success Installed "create-vuetify@x.x.x" with binaries:
- create-vuetify
? Project name: ❯ vuetify-project // the folder to generate your application
? Use TypeScript?: ❯ No / Yes
? Would you like to install dependencies with yarn, npm, or pnpm?:
❯ yarn
npm
pnpm
none
このあとにプロジェクトフォルダに移動してテストサーバーを起動できます。
cd vuetify-project yarn dev
Vuetifyのインストール
ではnpmを使ってVuetifyをインストールします。yarnを使わない人はこちらを使ってください。最初にも書いたようにViteでVueのプロジェクトを先に作成しておいてください。
npm install vuetify
Vuetifyの設定
では、VuetifyをインストールしたところでVue3で使えるように設定していきます。
ではsrc/main.jsを下記の様に上書きしましょう。
これで全部のコンポーネントをインポートしていますが、好みで必要なコンポーネントだけインポートすることも可能です。
import { createApp } from 'vue'
import App from './App.vue'
//スタイルは不要なら削除」
import './style.css'
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
createApp(App).use(vuetify).mount('#app')
ではテストサーバーを実行しておきましょう。
npm run dev #もしくは yarn dev
コンポーネントの使い方
ではsrc/App.vueにVuetifyのコンポーネントを入れてみます。
<template>
<v-alert text="これはv-alertのコンポーネント"></v-alert>
<v-color-picker></v-color-picker>
<v-hover>
<template v-slot:default="{ isHovering, props }">
<v-card
v-bind="props"
:color="isHovering ? 'primary' : undefined"
title="Hover over me"
text="..."
></v-card>
</template>
</v-hover>
</template>
このようにグローバルでVuetifyのコンポーネントが使えるようになりました。
コンポーネントごとで使えるprosや設定が変わってくるので詳しくはドキュメンテーションを確認するようにしましょう。
スペーシング
またスタイルを変更したい場合は下記の様にクラスを追加することでmarginやpaddingを変更することができます。
<v-alert text="これはv-alertのコンポーネント" class="ma-5"></v-alert>
<v-color-picker class="ma-5"></v-color-picker>
<v-hover class="ma-5">
<template v-slot:default="{ isHovering, props }">
<v-card
v-bind="props"
:color="isHovering ? 'primary' : undefined"
title="Hover over me"
text="..."
></v-card>
</template>
</v-hover>
このようにma-5（マージン オール）のクラスを追加することで簡単にスタイルが変更することができましたね。
詳しいスペースの使い方です。
このma-5は下記の要素が結合したものです。
{property}{direction}-{size}
propertyの箇所は:
m–marginのことp–paddingのこと
directionの箇所は：
t–margin-topとpadding-topb–margin-bottomとpadding-bottoml–margin-leftとpadding-leftr–margin-rightとpadding-rights–margin-left/padding-left( LTR モード) とmargin-right/padding-right(RTL モード)e–margin-right/padding-right(LTR モード) とmargin-left/padding-left(RTL モード)x–*-leftと*-righty–*-topと*-bottoma– すべての方向
sizeの箇所は 4pxずつ増えていきます:
0– すべてのmarginもしくは、paddingを01–marginもしくは、paddingを 4px2–marginもしくは、paddingを 8px3–marginもしくは、paddingを 12px- …
16–marginもしくは、paddingを 64pxn1–marginを-4pxn2–marginを-8pxn3–marginを-12px- …
n16–marginを-64pxauto– autoに設定します
Breakpoints（ブレイクポイント）
Flexboxを使ったリスポンシブなクラスを設定することができます。
| デバイス | コード | タイプ | レンジ |
|---|---|---|---|
| エキストラスモール | xs | モバイル | < 600px |
| スモール（小） | sm | タブレット | 600px > < 960px |
| ミディアム（中） | md | 大きいタブレットからノートパソコン | 960px > < 1264px* |
| ラージ（大） | lg | デスクトップ | 1264px > < 1904px* |
| エキストララージ | xl | 4k、ワイドモニター | > 1904px* |
ではこちらの参考コンポーネントを見てください。
<template>
<v-card class="pa-md-4 mx-lg-auto" color="secondary" width="250px">
<v-card-text> Adjust screen size to see spacing changes </v-card-text>
</v-card>
</template>
このようにカードコンポーネントにあるpa-md-4、mx-lg-autoクラスに注目してください。画面が大きくなると、pa-md-4クラスがはずれ、mx-lg-autoクラスが使われるようになります。
使い方はこのようになります。
{property}{direction}-{breakpoint}-{size}
breakpointは先ほどの表にあるxs、smなどの画面の幅を指定することになります。
Vuetifyの使い方を学ぶ
下記に機能ごとで分けた説明があります。今は英語しかサポートされていないのでGoogle翻訳しながら読んでください。
もしリクエストいただいた場合は翻訳した記事を作成も検討しています。
| 機能 | 対象 | 読む時間 |
| Bidirectionality (LTR/RTL) | 初心者向け | 1分 |
| Global configuration | 初心者向け | 1分 |
| Icon Fonts | 初心者向け | 15分 |
| Layouts | 初心者向け | 5分 |
| Theme | 初心者向け | 15分 |
| Accessibility (a11y) | 中級者向け | 10分 |
| Aliasing | 中級者向け | 5分 |
| Application layout | 中級者向け | 15分 |
| Display & Platform | 中級者向け | 15分 |
| Internationalization (i18n) | 中級者向け | 5分 |
| SASS variables | 中級者向け | 10分 |
| Blueprints | 上級者向け | 10分 |
| Treeshaking | 上級者向け | 15分 |
Happy Coding!