Help us understand the problem. What is going on with this article?

【Vue.js】Vuetifyのインストール方法と基本的な使い方

はじめに

Vue.jsのUIコンポーネントライブラリであるVuetifyのインストール方法と代表的な使い方をまとめました。

公式サイトURL
↑ 完全ではないですが日本語化も進んでいます。
解説やデモが各コンポーネント毎に掲載されていて、見始めたら止まりません。笑

環境

OS: macOS Catalina 10.15.1
vue: 2.6.10
vue-cli: 4.1.1
vue-router: 2.6.10
vuex: 3.1.2
vuetify: 2.1.0

インストール

※Vue-CLIでVueの環境は構築済とします。

$ vue create my-app

$ vue add vuetify

これだけで使える状態になっています。

CDN版もあります。

1.レスポンシブデザインの指定

xs~xlまで5段階用意されています。
image.png

クラスの末尾にnoneflexで非表示、表示の指定が可能で、例えば

  • 全ての大きさで非表示:d-none
  • Small 以上なら表示:d-sm-flex

となります。

これを組み合わせると、
スマホでは非表示にしてPCなら表示したい要素であれば、

<div class="d-none d-sm-flex">
  ...
</div>

のようにすればOKです。

その他レスポンシブ関連の詳細はこちらへ。
CSS Display helpers — Vuetify.js

2.カラー

通常の#FFEBEEのようなカラーコード指定に加え、
red lighten-5のようにも書けます。

具体的な色合いは以下リンクから確認可能です。
Material color palette — Vuetify.js
image.png

3.UI component

使用例:ドロップダウンメニュー

各コンポーネントはv-〇〇で命名されており、それらを入れ子にして好きな形に組み上げていきます。

例えば、以下の<v-menu>内を書くことで、CSS・JavaScriptを一切書かずにドロップダウンメニューを実装出来てしまいます。

楽!

↓公式のデモはこちら
App-bar component — Vuetify.js

sample.vue
<template>
<v-bar>
...
<v-menu
  left
  bottom
>
  <template v-slot:activator="{ on }">
    <v-btn icon v-on="on">
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </template>

  <v-list>
    <v-list-item
      v-for="n in 5"
      :key="n"
      @click="() => {}"
    >
      <v-list-item-title>Option {{ n }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>
</v-bar>
...
</template>

4.Directives

使用例:Intersection observerも簡単に使える

v-intersectというディレクティブを使用することで、スクロールして指定範囲に入ったらクラスを付与とかも簡単に実装できます。

以下例では、<v-card>の要素が画面の範囲内に入ってきたら<v-avatar>の色が変わるようになっています。

楽!

↓公式のデモはこちら
Intersection observer directive — Vuetify.js

sample.vue
<template>
  <div>
    <div>
      <v-avatar
        :color="isIntersecting ? 'success' : 'error'"
      ></v-avatar>
    </div>
    <v-card
      v-intersect="onIntersect"
    >
      ...
    </v-card>
  </div>
</template>

<script>
  export default {
    data: () => ({
      isIntersecting: false,
    }),

    methods: {
      onIntersect (entries, observer) {
        this.isIntersecting = entries[0].isIntersecting
      },
    },
  }
</script>

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

その他、指定出来るスタイルや使えるUIコンポーネントが多数揃っていて不自由しなさそうです。
良いデザインが余りにも簡単に実装出来るのでビックリ:sweat_smile:

参考にさせて頂いたサイト(いつもありがとうございます)

マテリアルデザインコンポーネントフレームワーク — Vuetify.js

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした