🤧

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

2022/05/07に公開約3,900字

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で、色々な設定が必要だった初期設定が
1つのコマンドで終わります!!最高!!!

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

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

Vuetifyの導入

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

$ 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を参照してください。

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

https://next.vuetifyjs.com/en/features/theme/
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)
})

参考記事

https://next.vuetifyjs.com/en/getting-started/installation/
https://v3.nuxtjs.org/getting-started/quick-start/
https://zenn.dev/winteryukky/articles/87a40b60fddb96
https://qiita.com/hitokun-s/items/f98cb11778b9998d4efd

Discussion

ログインするとコメントできます