🤧

Nuxt3[RC]でVuetify3[Beta]を使える様にする！マテリアルデザインアイコンの有効化と、カスタムテーマ作成も

2022/05/08に公開

Nuxt

Vue.js

Vuetify

tech

Vuetifyってなに?

UIフレームワークです。
例) <v-btn>Submit</v-btn>など、タグを挿入するだけで簡単に綺麗なボタンが使えます。

開発バージョン

Node.js: 16.15.0
yarn: 1.22.18
Nuxt: 3.0.0-rc.1
Vuetify: 3.0.0-beta.1

Nuxtappを作成する

https://v3.nuxtjs.org/getting-started/quick-start/
にあるように開発には以下が必要なため、先に用意しておいてください。

Nodejs LTS
VSCode
Volar( VSCodeのプラグインでも可)

用意ができたら、以下のコマンドをターミナルで実行します。

$ npx nuxi init nuxt-app

Nuxt2ではTypeScriptに対応するためetcで、色々な設定が必要だった初期設定が
１つのコマンドで終わります！！最高！！！

$ cd nuxt-app
$ yarn install
$ yarn dev -o

これでもう開発できちゃいます

Vuetifyの導入

以下の３つを追加してください。

$ yarn add -D vuetify@next @vuetify/vite-plugin sass

執筆時点では、これだけだとmdiが使えずに、v-alertが寂しくなるので以下も追加しておきます。

$ yarn add -D @mdi/js @mdi/font

、Nuxt.js用のVuetifyモジュールはVuetify3に対応していないため（執筆時点では）プラグインを作成します。
Nuxt3ではpluginsは自動インポートしてくれます。

plugins/vuetify.ts

import '@mdi/font/css/materialdesignicons.css' // mdi-icon用
import { createVuetify } from 'vuetify'
import { Vapp, VAlert, VBtn, VCard, VCheckbox, VContainer, VForm, VIcon, VTable, VTextField } from 'vuetify/components'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components: {
    　　　　Vapp,
      VAlert,
      VBtn,
      VCard,
      VCheckbox,
      VContainer,
      VForm,
      VIcon,
      VTable,
      VTextField
    }
  })

  nuxtApp.vueApp.use(vuetify)
})

全てのコンポーネントを読み込みたい場合

plugins/vuetify.ts

import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'

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

  nuxtApp.vueApp.use(vuetify)
})

nuxt.config

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  typescript: {
    shim: false,
    strict: true
  },
  css: [
    'vuetify/styles'
  ],
  build: {
    transpile: ['vuetify']
  },
  vite: {
    define: {
      'process.env.DEBUG': false
    },
    server: {
      watch: {
        usePolling: true
      }
    }
  }
})

vite:　の中身なんですが、現在Vuetifyのではprocess.env.DEBUGが読み込まれず警告が出るので書きましょう。
usePollingはホットリロードできるようになるのでおすすめです。

今回は使いませんが、テーマを使用したい方はこちらの設定だけでは足りないので以下の設定と、進捗についてはGithubのdiscussionsを参照してください。

カスタムテーマの使い方はこちら

plugins/vuetify.ts

import '@mdi/font/css/materialdesignicons.css'
import { createVuetify, ThemeDefinition } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const myCustomLightTheme: ThemeDefinition = {
    dark: false,
    colors: {
      background: '#FFFFFF',
      surface: '#FFFFFF',
      primary: '#6200EE',
      'primary-darken-1': '#3700B3',
      secondary: '#03DAC6',
      'secondary-darken-1': '#018786',
      error: '#B00020',
      info: '#2196F3',
      success: '#4CAF50',
      warning: '#FB8C00',
    }
  }
  const vuetify = createVuetify({
    theme: {
      defaultTheme: 'myCustomLightTheme',
      themes: {
        myCustomLightTheme
      }
    },
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

Nuxt3[RC]でVuetify3[Beta]を使える様にする！マテリアルデザインアイコンの有効化と、カスタムテーマ作成も

開発バージョン

Nuxtappを作成する

Vuetifyの導入

参考記事

Discussion