【サンプル有】Nuxt.js への Vuetify 導入手順を解説！

こんにちは。どんぶラッコです。

本日は、Nuxt.js で Vuetify を使えるように設定してみましょう。

Vuetifyとは、BootstrapやBulmaのような、CSSフレームワークの一種です。 Vue に特化したフレームワークですね！

ぶっちゃけ、新しくNuxtのプロジェクトを作るときには create-nuxt-app コマンドを実行したときに “Choose UI framework” の項目でVuetifyを選べば自動的に使えるようにセットアップしてくれます。

しかし、プロジェクトの途中でインストールしたくなった… なんてこともありますよね？

ということで、今回は後からNuxt.jsでVuetifyを有効化する手順をご紹介します！

@nuxtjs/vuetify ライブラリを使う

使用するのは @nuxtjs/vuetify ライブラリです。

Nuxtコミュニティは情報のアップデートが活発なので、このようなライブラリ関係が充実していてありがたいですね。

ライブラリをインストールをする

早速インストールしていきましょう。

yarn add --dev @nuxtjs/vuetify

npm をお使いの場合は

npm install --save-dev @nuxtjs/vuetify 

を使ってください。

buildModulesに追記する

次に nuxt.config.js の buildModules に追記します。

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

これで完了です。

もし Nuxt.jsのバージョンが 2.9.0 未満だったら modules に記述するそうです。

2020年4月現在、私の環境上では create-nuxt-app で Nuxtプロジェクトを新規作成すると v2.11.X 系がインストールされます。

index.vueでVuetifyのコンポーネントを利用してみて、反映されるかを確認してみてください。

<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="6">
        <v-card>
          <v-card-title>Hello, Vuetify!</v-card-title>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

サンプルコード

Vuetifyを使い倒しちゃいましょう！