[Nuxt.js]Nuxt + Typescript + Vuetify + Sass のプロジェクト作成

今回はNuxtの静的なビルド済みSPA(CMSサイトに埋め込むSPA)を生成するプロジェクトの作成を行います。
備忘録として記録しておきます (2021/09/24現在)

環境

// 使用端末
macOS BigSur v11.3.1

// Node.js
node -v
v14.17.6

Nuxtプロジェクト作成

① 下記コマンドでNuxt新規プロジェクトを作成

yarn create nuxt-app <project-name>

② 初期設定は下記の通りとする

初期設定ポイント

• Programming Language
  → Typescript
• UI FrameWork
  → Vuetify.js
• Nuxt.js modules
  → Axios
• Linting Tools
  → Eslint
• Testing framework
  → Jest
• Rendering Mode
  → SPA
• Deployment Target
  → Static

NuxtとTypescript、Vuetifyの最低限使える設定は一旦これで完了！

Sassをインストールする

① Sassと関連モジュールをインストールする

yarn add -D sass sass-loader@10 fibers

参考: Nuxt公式
※現在 (2021/09/24)はfibersはNodeの最新v16.10.0に対応していないのでNodeのバージョンに注意！

かなり簡潔まとめですが、
Typescript、Vuetify、Sassをで使う上での初期設定など別記事にまとめる予定です

Vuetifyの設定