⛰️
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」ページには、他にも便利なモジュールがありますので参考にしてみてください。
Discussion