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

注意

2024/12 現在、Nuxt3 + Vuetify + SASS/SCSS を使いたい場合は vite-plugin-vuetify を使ってもうまくいくようになりました。Vuetify 的には vite-plugin-vuetify の使用を推奨しているようなので、そちらを使ったほうがよさそうです。

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

参考までに記事は残しておきます。

主旨

Nuxt3 で Vuetify3 を使う方法です。

外部モジュールなしで使う方法を下記に書いていましたが、下記の方法では現状 (Nuxt 3.8.2 + Vuetify 3.4.6) SASS/SCSS 周りがどうしてもうまくいかないようです。

• Nuxt3 で Vuetify3 を使う

vuetify-nuxt-module を使うとプロジェクト作成も簡単で、SASS/SCSS も（一応）動くことを確認しました。以下に方法をメモしておきます。

• Vuetify Nuxt Module

前提

$ node -v
v20.14.0
$ yarn -v
1.22.22
$ npm -v
10.8.3
$ npx nuxt -v
⚡️ Nuxt Generation CLI Experience (nuxi v3.13.2)

OS は Windows/MacOS/Linux どれでもOKです。node のバージョンは多少違ってもたぶん大丈夫です。

プロジェクトの作成

基本、下記のとおりです。

• vuetify-nuxt-module: Getting Start

$ npx nuxi@latest init sample
✔ Which package manager would you like to use?
yarn
...
✔ Initialize git repository?
No
...
$ cd sample
$ yarn add -D vuetify-nuxt-module

最低限、上記だけでも動きますが、開発に使うならアイコンも入れておいたほうが良いです。

$ yarn add @mdi/font 

nuxt.config.ts の編集

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    'vuetify-nuxt-module'
  ],
}

動作確認

app.vue に適当な Vuetify のコンポーネントを追加します。例えば下記のようにします。

app.vue

<template>
  <v-app>
    <v-container>
      <v-btn color="primary">
        Vuetify
      </v-btn>
    </v-container>
  </v-app>
</template>

これで yarn dev すして http://localhost:3000/ をブラウザで開くと下記のページが表示されるはずです。

デフォルトで font は roboto フォントになります。mdi (material design icon) も使えます。

SASS/SCSS を使う

sass モジュールを追加します。

$ yarn add sass

nuxt.config.ts を下記のように編集します。

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  //ssr: false,
  modules: [
    'vuetify-nuxt-module'
  ],
  vuetify: {
    moduleOptions: {
      styles: { configFile: '/styles/settings.scss' }
    },
    vuetifyOptions: {
      /* vuetify options */
    }
  },
}

styles/settings.scss を作成します。例えば下記のような感じです。

styles/settings.scss

@use 'vuetify/settings' with (
  $button-border-width: 5px,
  $button-border-color: red,
  $button-height: 100px,
);

これで yarn dev すると、下記のように settings.scss の内容が反映されます。

下記のような記述も正常に反映されます。

styles/settings.scss

@forward 'vuetify/settings' with (
  $button-border-width: 5px,
  $button-border-color: red,
  $button-height: 100px,
);

app.vue

<template>
  <v-app>
    <v-container>
      <v-btn color="primary" class="my-button">
        Vuetify
      </v-btn>
    </v-container>
  </v-app>
</template>

<style lang="scss">
@use '@/styles/settings';

.my-button {
  height: settings.$button-height !important;
}
</style>

!important がないとうまくいかないのがちょっと気になりますが、一応動きはします。

Vuetify3 + SASS/SCSS については、下記（公式）を参照してください。

• Vuetify3 (sass)

余談

nuxt + vuetify を使う方法としては @invictus.codes/nuxt-vuetify モジュールを使う方法もありますが、SASS/SCSS 周りはうまく動かない気がします。