Vue.jsベースのフレームワーク！ Nuxt3入門《Vuetify3導入》

#プログラム #JavaScript #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回は前回のVue.jsベースのフレームワーク！ Nuxt3入門《新規プロジェクトの作成》に引き続き、Nuxt3利用にあたり必要なライブラリのインストールを行っていきます。よろしくお願いいたします。

追加ライブラリ

今回は、前回作成したプロジェクトに、Vuetify3を導入していきます。
導入の為、下記ライブラリを追加していきます。

sass
vuetify@next
vite-plugin-vuetify

上記ライブラリを下記コマンドでインストールします。

npm install -D vuetify@next sass vite-plugin-vuetify

Vuetify3設定

次にNuxt3にVuetify3の設定をしていきます。

必要フォルダの作成
ルート直下に新規で下記フォルダを作成していきます。

assets
plugins

　　sample-project
　　　|- .nuxt
　　　|- assets ← 新規作成
　　　 |- vuetify.ts
　　　|- layouts
　　　|- node_modules
　　　|- plugins ← 新規作成
　　　 |- main.scss
　　　|- .gitignore
　　　…

vuetify.tsの作成
次に「assets」の中に「vuetify.ts」を作成します。そして、下記内容を記載し保存します。

– vuetify.ts

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

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    ssr: true,
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

main.scssの作成
次に「assets」の中に「main.scss」を作成します。
そして、下記内容を記載し保存します。

@use "vuetify/lib/styles/main.sass";

nuxt.config.tsの追記
最後に「nuxt.config.ts」に、下記内容を記載し保存します。

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify']
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    }
  }
})

Vuetify3導入確認

動作確認の為「app.vue」の中身を下記内容に変更します。

<template>
  <div>
    <v-container>
      <v-btn
        depressed
        color="blue-grey"
      >
        Vuetify3確認
      </v-btn>
    </v-container>
  </div>
</template>

次に以下のコマンドを実行します。
「npm run dev」