はじめに
Vue.jsやNuxtを仕事で使っています。その流れでVuetifyを使う機会があったので記事にまとめてみました。
Vuetifyって何？
公式によると
Vuetifyは、初心者から熟練者までの学びやすさと達成感を目指して、ゼロから構築された強力なVueコンポーネントフレームワークです。
Vue.jsやNuxtと組み合わせて使いやすいコンポーネントがまとまっているフレームワークです。CSSフレームワーク（Bootstrapなど）というものがありますが、それのVue特化タイプといった感じでしょうか。CSSを書かずとも整ったデザインにしてくれてとっても便利なのです！
現状（2024年12月時点）はVuetify3が最新です。
マテリアルデザイン
Googleのマテリアルデザインの仕様に基づいて作られているのも特徴の一つ。そんなに癖がなく、シンプルで機能的なデザインだなと感じています。（個人的には好み！）
Vuetify3の導入
公式ドキュメントのインストールの説明通り進めていけばそんなに難しくはないかと思いますが、自分がちょっとハマってしまったのがテーマの変更。
export default createVuetify({
theme: {
defaultTheme: 'dark'
}
})
この状態だとダークテーマで、defaultThemeをlightにするとライトテーマに変更できます。テーマに関するその他の細かな設定は下記リンクをご参照ください。
コンポーネントを使ってみる
導入ができたら、実際にコンポーネントを使ってみましょう。
様々なコンポーネントがありますが、今回はv-data-tableを使ってみました。
v-data-tableを使ってみる
公式のサンプルコードを参考に、下記のようなデータテーブルを作ります。
コードは下記の通り
<template>
<v-data-table :items="items"></v-data-table>
</template>
<script setup lang="ts">
const items = [
{
base: 'ジーズアカデミー東京',
location: '東京都渋谷区神宮前',
station: '原宿駅',
},
{
base: 'ジーズアカデミー福岡',
location: '福岡市中央区大名',
station: '天神駅',
},
{
base: 'UNIT_SAPPORO',
location: '札幌市',
station: '札幌駅',
},
]
</script>
画像ではテーブルを単に表示するだけでなく、ぺジネーションやソートもできるようになっているのですが、コードを見ていただくとどうでしょう？特にそういった設定はしていません。v-data-table自体にその機能が含まれているのです。
APIで機能を追加する
v-data-tableの機能をもっと追加したい、デザインをアレンジしたいといった場合は、APIを使います。公式の各コンポーネントのページで、APIという部分があります。
v-data-tableだとこんな感じ
v-data-table APIの中にホバーがあったので追加してみます。
<template>
<v-data-table
:items="items"
:hover="true"
>
</v-data-table>
</template>
:hover="true"を追加しただけですが、下記のようにホバーを追加することができました。
こういった形で、APIで様々な機能を簡単に追加していくことができます。
最後に
まだまだ使いこなせているとまでは言えませんが、Vuetify3の便利さは実感しています。Vue.jsやNuxtを使用している方はぜひ使ってみていただきたいですし、これきっかけでVue.jsを使う仲間が増えると嬉しいです！
最後までお読みいただきありがとうございました。