Zenn
🏋️‍♀️

#84　【Vue.js】Vuetify3を使ってみた

に公開
Vue.js
Vuetify
tech

はじめに

今回はVuetifyで便利そうだと思った機能を実際に使ってみました。
画面のキャプチャを載せていますので興味のある方はぜひ試してみてください。

実際に使ってみる

準備

以下のコマンドを実行して、プロジェクトを作成しVuetifyをインストールします。

vue create my-app
=>Default ([Vue 3] babel, eslint)を選択
cd my-app
vue add vuetify
=>Vuetify 3 - Vue CLI (preview)を選択

※Vue 3を使用するため上記の選択を行いましたが、Vue 2を使いたい場合などは任意の選択を行ってください

Vuetifyを使ったコードを書いてみる

VuetifyはVue.js用のフレームワークで簡単にUIを作成することができるツールです。
ボタンやフォーム、ナビゲーションバーなど多くのコンポーネントが用意されています。

カードを作成してみる

<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-card>
          <v-card-title>タイトル1</v-card-title>
          <v-card-subtitle>サブタイトル1</v-card-subtitle>
          <v-card-text> テキストが入ります。 </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="3">
        <v-card>
          <v-card-title>タイトル2</v-card-title>
          <v-card-text> テキストが入ります。 </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="9">
        <v-card>
          <v-card-title>タイトル3</v-card-title>
          <v-card-subtitle>サブタイトル2</v-card-subtitle>
          <v-card-text> テキストが入ります。 </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

v-containerで要素をくくり、v-rowで行、v-colで列を作成します。
colsは列の幅を指定することができます。
最大の幅がcols="12"です。
例えばcols="3" は全体の1/4の幅、cols="9" は全体の3/4の幅となります。
v-cardはタイトルやテキストを表示するのに用います。
image.png

テーブルを作成してみる

<template>
  <v-container>
    <v-data-table
      :headers="headers"
      :items="items"
    >
    </v-data-table>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      // テーブルのヘッダー
      headers: [
        { title: '名前', key: 'name' },
        { title: '年齢', key: 'age', align: 'end' },
        { title: '血液型', key: 'abo', align: 'end'  },
      ],
      // テーブルに表示するデータ
      items: [
        { name: '山田', age: 23, abo: 'A' },
        { name: '田中', age: 28, abo: 'B' },
        { name: '佐藤', age: 34, abo: 'O' },
        { name: '鈴木', age: 45, abo: 'AB' },
      ],
    }
  },
}
</script>

v-data-tableは、データを表示するためのテーブルです。
headersとitemsの配列をそれぞれ参照し表示します。
headersは列名とキー名、itemsはキーに対するデータを配列として渡します。
align: 'end'で終了位置揃えにしています。

参考：https://v2.vuetifyjs.com/ja/api/v-data-table/#props-headers
image.png

上記の記述だとソートとページネーションの機能がつきましたが、他にも便利な機能が使えるようです。
参考：https://v15.vuetifyjs.com/ja/components/data-tables/

テーマのカスタマイズを行ってみる

Vuetifyでは、テーマをカスタマイズすることができます。
lightとdarkの2つのテーマが事前にインストールされています。

export default createVuetify({
  theme: {
    defaultTheme: 'dark',
  },
})

image.png

defaultThemeをdarkにすると、画面が暗くなりました。

テーマの色は自分で設定することもできます。

const myCustomTheme = {
  colors: {
    background: '#87ceeb',
    surface: '#f0fff0',
  },
}

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme,
    },
  },
})

image.png

参考：https://vuetifyjs.com/ja/features/theme/#api

ダイアログを作成してみる

<template>
  <v-container>
    <v-btn @click="dialog = true">ボタン</v-btn>
    <v-dialog v-model="dialog">
      <v-card>
        <v-card-title>ダイアログタイトル</v-card-title>
        <v-card-text> テキスト </v-card-text>
        <v-btn @click="dialog = false">閉じる</v-btn>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
    };
  },
};
</script>

v-btnでボタンの作成、v-dialogでモーダルダイアログを作成することができます。
image.png

CSSやテーマの設定をしていない場合は白を基調とした色ですが、今回はテーマをカスタマイズしたままのため青色で表示されています。
少しの記述で綺麗なデザインになり、とてもありがたいです。

最後に

今回はVuetifyでできることを一部紹介してみました。
レスポンシブにも対応しており、とても使いやすかったです。
ご覧いただきありがとうございました。

参照：
https://vuetifyjs.com/ja/getting-started/installation/

Discussion