Nuxt.js｜Vuetify

  • 投稿日
  • 著者 kngsmym
  • カテゴリー Nuxt.js

Nuxtのプロジェクト作成時にUIフレームワークを選択できるが、Vuetifyはその選択肢に含まれているのでcreate-nuxt-appの実行時に選べばそのまま使えるはず。

? UI framework: Vuetify.js
Vuetify — A Material Design Framework for Vue.js
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create be…
vuetifyjs.com

プロジェクト作成時には選択しておらず、途中から組み込む場合は以下の手順であとから追加できる。

インストール

$ npm install @nuxtjs/vuetify -D

僕の環境だとエラーが発生

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!

下記にて解決

$ sudo rm -rf $(xcode-select -print-path)
$ sudo rm -rf /Library/Developer/CommandLineTools
$ xcode-select --install

上記を実行した後、改めてインストールを実行したら、問題なく完了した。

設定ファイルに追記

nuxt.config.jsのbuildModulesに以下を追記。

{
  buildModules: [
    '@nuxtjs/vuetify',
  ]
}

以上の設定を終えて、devを再起動するとVuetifyのコンポーネントが使えるようになってる。

超簡単。

Nuxt Vue vuetify