NUXTでVuetify2.0を動かしてみる

NUXTに慣れるために、ホームページ関連のプロジェクトはNUXTを使うようにしています。
少し前になりますがVuetify2.0がリリースされました。興味があったので試してみました。
いろいろな記事があるのでどれが一番良い方法か分かりませんが、メモ代わりに公開しておきます。

npx create-nuxt-appで新規NUXTプロジェクトの作成

c:\FutureCoders>npx create-nuxt-app プロジェクト名
質問に対しては以下の通り

  • プロジェクト名、 Description デフォルト通り
  • custom server framework : none
  • features to install : Axiosのみ
  • custom UI framework : none
  • test framework : jest
  • rendering mode : Universal
  • package manager : npm

いったんこの段階でnpm run devを実行してページが見られるか確認しました。

@nuxtjs/vuetifyのインストール

npm info @nuxtjs/vuetify
を実行し、このモジュールに依存するモジュールのバージョンを確認

consola: ^2.10.1       sass-loader: ^7.3.1    vuetify: ^2.0.11
deepmerge: ^4.0.0      sass: ^1.22.10
fibers: ^4.0.1         vuetify-loader: ^1.3.0

以下のコマンドを実行して@nuxtjs/vuetifyをインストール

npm install --save-dev @nuxtjs/vuetify

Vuetify2.0で追加されたカラーピッカーを試してみるため、
pages/index.vueにを追加するものの、

[Vue warn]: Unknown custom element: <v-color-picker> - did you register the component correctly? 

というエラーが表示されていることが判明

そこで、nuxt.config.jsに以下の設定を追加

  devModules: ['@nuxtjs/vuetify'],
  vuetify: {
    theme: {
      dark: false
    }
  }

無事カラーピッカーが表示されました。
vuetify2.0

これからFirebaseと連携したWebアプリを作ってゆきたいと思います。