Nuxt3でVuetifyを使えるようにする簡単手順

はじめに

「Nuxt3でVuetifyを使いたいけど、設定がややこしい！」という人のための、手順をなるべく少なくしたインストール方法です。

さっそく本題

まずはNuxtのプロジェクトを立ち上げましょう。

npx nuxi@latest init my-app

プロジェクトが作成できたら、そのフォルダ内に移動します。

cd my-app

次に@invictus.codes/nuxt-vuetifyをインストールします。

npm install --save-dev @invictus.codes/nuxt-vuetify

nuxt.config.tsのmodulesに@invictus.codes/nuxt-vuetifyを追加します。

nuxt.config.ts

export default defineNuxtConfig({
  // ...,
  modules: ["@invictus.codes/nuxt-vuetify"],
});

以上でVuetifyが使えます！

使ってみる

試しにapp.vueをこのように書き換えます。

<template>
  <div>
    <v-btn>Button</v-btn>
  </div>
</template>

開発環境で確認してみます。

npm run dev

ブラウザを立ち上げてhttp://localhost:3000/にアクセスすれば、Vuetifyで作成されたボタンが確認できるはずです。

おわりに

今回は@invictus.codes/nuxt-vuetifyモジュールを使用しました。
Nuxt公式サイトの「Modules」ページには、他にも便利なモジュールがありますので参考にしてみてください。