Nuxt3でVuetify3を使ってみた

はじめに

業務でVuetifyを使いそうな気がするので勉強がてら記事を書きました。
下記の記事を参考にさせていただきました。

事前準備

Nuxt3の環境構築が済んでいる前提です。

環境

• macOS Monterey：12.6
• Node.js：18.12.1
• Nuxt.js：3.0.0
• Vue.js：3.2.45

1. Vuetifyをインストールする

Vuetifyをインストール

yarn add vuetify@next

sassもインストール

yarn add sass

2. vuetify.jsを作成

ルートディレクトリにpluginsを作成し、その中にvuetify.jsを作成

plugins/vuetify.js

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components
  })

  nuxtApp.vueApp.use(vuetify)
})

3. nuxt.config.tsにVuetifyの設定を追加

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    }
  },
})

1行目は書かなくても動きますので、明示的にimportしたい場合のみ書いてください。

4. コンポーネントを使用する

実際にコンポーネントを使ってみます。
app.vueを編集します。

app.vue

<template>
  <div>
    <v-container>
      <v-btn
        depressed
        color="primary"
      >
        Primary
      </v-btn>
      <v-btn
        depressed
        color="error"
      >
        Error
      </v-btn>
    </v-container>
  </div>
</template>

下の画像のように表示されれば設定成功です。

5. アイコンを使用するための設定

mdiをインストールします。

yarn add mdi

nuxt.config.tsを修正します

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'], // 修正
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    }
  },
})

アイコンが使えるか確認するためにapp.vueを編集します。

app.vue

<template>
  <div class="text-center">
    <div>
      <v-btn
        class="ma-2"
        color="primary"
        dark
      >
        Accept
        <v-icon
          dark
          right
        >
          mdi-checkbox-marked-circle
        </v-icon>
      </v-btn>
      <v-btn
        class="ma-2"
        color="red"
        dark
      >
        Decline
        <v-icon
          dark
          right
        >
          mdi-cancel
        </v-icon>
      </v-btn>
      <v-btn
        class="ma-2"
        dark
      >
        <v-icon
          dark
          left
        >
          mdi-minus-circle
        </v-icon>Cancel
      </v-btn>
    </div>
  </div>
</template>

ボタンの中にアイコンが表示されればOKです。

6. Directivesを使用するための設定

Directivesはユーザーのアクションに反応してUIが変化するような機能です。

設定方法ですが、vuetify.jsを修正するだけです。

vuetify.js

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives' // 追加

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives // 追加
  })

  nuxtApp.vueApp.use(vuetify)
})

実際に試してみます。
app.vueファイルを編集します。

app.vue

<template>
  <div>
    <v-container>
      <div
        v-ripple
        class="text-center elevation-2 pa-12 text-h5"
      >
        HTML element with v-ripple
      </div>
    </v-container>
  </div>
</template>

アクセスすると先ほどの動画と同じ画面が表示されますので、動作確認してみてください。

おわりに

ここまで見ていただきありがとうございました。
この記事で使用したもの以外にもたくさんコンポーネントがあるのでぜひ確認してみてください。

参考