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 使用)](https://qiita.com/mml/items/916fefa77ca7c88e7086)

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

# 主旨

Nuxt3 で Vuetify3 を使う方法です。

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

- [Nuxt3 で Vuetify3 を使う](https://qiita.com/mml/items/9936471c551ee3f15218)

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

- [Vuetify Nuxt Module](https://vuetify-nuxt-module.netlify.app/)

# 前提

```bash
$ 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](https://vuetify-nuxt-module.netlify.app/guide/)

```bash
$ 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/` をブラウザで開くと下記のページが表示されるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/bfcfa0d3-4029-d1e3-93fa-32d8fc8f4d53.png)

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

## SASS/SCSS を使う

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

```bash
$ 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` の内容が反映されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/5b881916-a63e-487a-2204-4d219dda168a.png)

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

```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>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/dec08d94-e642-d2dd-c17b-205bf350d496.png)

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

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

- [Vuetify3 (sass)](https://vuetifyjs.com/en/features/sass-variables/)

# 余談

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