Nuxt3 で Vuetify3 + SASS/SCSS を使う (vite-plugin-vuetify 使用)

主旨

Nuxt3 + Vuetify ( + SASS/SCSS ) を使う場合のプロジェクトのセッティング方法についてのメモです。

以前は vuetify-nuxt-module を使わないと SASS がうまく機能してませんでしたが、2024/12 現在では vite-plugin-vuetify でも機能するようになったというのと、Vuetify 的には vite-plugin-vuetify の使用を推奨しているようなので、こちらを使う場合について書いておきます。

• Nuxt3 で Vuetify3 + SASS/SCSS を使う (vuetify-nuxt-module 使用)

前提

多少バージョン違っても行けると思います。Windows / Mac / Liux のどれでもいけます。

$ node -v
v20.14.0
$ npm -v
10.9.2
$ yarn -v
1.22.22
$ npx nuxi@latest --version
3.16.0

プロジェクト作成

基本は下記に書いてある通りです。

• Get started with Vuetify 3

$ npx nuxi@latest init your-project-name
$ cd your-project-name
$ yarn
$ yarn add -D vuetify vite-plugin-vuetify sass@1.69.5
$ yarn add @mdi/font

sass については、現状 2.0.0 以上を入れるとエラーが出て動かないので、安定版の 1.69.5 を入れます。

• Saas(scss)でLegacy JS APIによるエラーが起きた(；；)→解決方法

Configuration

next.config.ts の書き換えをして、plugins/vuetify.ts, styles/main.scss, styles/settings.scss の３つのファイルを作成します。

• styles/main.scss: グローバル変数などの設定用
• styles/settings.scss: コンポーネントの設定用

next.config.ts

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineNuxtConfig({
  //...
  build: {
    transpile: ['vuetify'],
  },

  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify(
          { 
            autoImport: true,
            styles: { configFile: '/styles/settings.scss' }
          }))
      })
    },
    //...
  ],

  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },

  compatibilityDate: '2024-12-17',
})

plugins/vuetify.ts

// import this after install `@mdi/font` package
import '@mdi/font/css/materialdesignicons.css'

import '~/styles/main.scss'
import { createVuetify } from 'vuetify'

export default defineNuxtPlugin((app) => {
  const vuetify = createVuetify({
    // ... your configuration
  })
  app.vueApp.use(vuetify)
})

styles/main.scss

// とりあえずファイルだけ作成しておく

styles/settings.scss

@use 'vuetify/settings' with (
  $button-height: 100px,
);
// ボタンのサイズを変更するテスト用

テスト用ファイル

app.vue

<template>
  <v-app>
    <v-system-bar color="secondary">
      System Bar
    </v-system-bar>

    <v-app-bar color="primary">
      <v-app-bar-title>
        Application Bar
      </v-app-bar-title>
    </v-app-bar>

    <v-navigation-drawer permanent>
      Navigation Drawer
    </v-navigation-drawer>

    <v-main>
      <v-container>
        <NuxtPage />
      </v-container>
    </v-main>

    <v-bottom-navigation>
      Button Navigation
    </v-bottom-navigation>

    <v-footer color="primary" app>
      Footer
    </v-footer>

  </v-app>
</template>

pages/index.vue

<template>
<v-btn color="primary">PUSH!</v-btn>
This is the main page.
</template>

実行テスト

$ yarn dev

これで styles/settings.scss の内容が反映されて、下記の図のようにボタンのサイズが大きくなっていれば成功です。

参考

詳しくは下記を参照してください。

• Vuetify SASS variables