Nuxt.jsのプロジェクトにVuetify.jsを導入する方法

Nuxt.jsのプロジェクトに、Vuetify.jsを導入する方法を紹介します。

create-nuxt-appを使用する場合

プロジェクトの作成にcreate-nuxt-appを使用する場合、UIフレームワークのオプションでvuetifyを選択するだけで導入することができます。

create-nuxt-appを使用しない場合

Nuxt.jsのスターターテンプレートや、スクラッチからプロジェクトを作っている場合は、自分でVuetify.jsのモジュールを追加する必要があります。

パッケージをインストール

nuxtjsが提供しているVuetify.js用のモジュールである@nuxtjs/vuetifyをインストールします。

$ npm i -D @nuxtjs/vuetify

プロジェクトにモジュールを追加

nuxt.config.jsファイルのmodulesに、@nuxtjs/vuetifyを追加します。

例：

nuxt.config.js

module.exports = {
  modules: [
    '@nuxtjs/vuetify'
  ]
}

これだけで、各コンポーネント内でVuetify.jsのコンポーネントを使用することができます。

使用例

• munierujp/nuxt-vuetify-example