Vuetifyのインストール

Vue3でVuetifyをインストールしよう

by

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-top
  • b –  margin-bottom とpadding-bottom
  • l – margin-left とpadding-left
  • r – margin-right とpadding-right
  • s – margin-left/padding-left ( LTR モード) とmargin-right/padding-right (RTL モード)
  • e – margin-right/padding-right (LTR モード) とmargin-left/padding-left (RTL モード)
  • x – *-left と*-right
  • y –  *-top と *-bottom
  • a – すべての方向

sizeの箇所は 4pxずつ増えていきます:

  • 0 – すべてのmargin もしくは、padding を 0
  • 1 – margin もしくは、padding を 4px
  • 2 – margin もしくは、padding を 8px
  • 3 – margin もしくは、padding を 12px
  • …
  • 16 – margin もしくは、padding を 64px
  • n1 – margin を-4px
  • n2 – margin を-8px
  • n3 – margin を-12px
  • …
  • n16 – margin を-64px
  • auto – autoに設定します

Breakpoints（ブレイクポイント）

Flexboxを使ったリスポンシブなクラスを設定することができます。

デバイスコードタイプレンジ
エキストラスモールxsモバイル< 600px
スモール（小）smタブレット600px > < 960px
ミディアム（中）md大きいタブレットからノートパソコン960px > < 1264px*
ラージ（大）lgデスクトップ1264px > < 1904px*
エキストララージxl4k、ワイドモニター> 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!