Nuxt3 で新規プロジェクトの作成から UI framework を追加する手順

Nuxt3 beta で plugins を使う手順を調べたついでに Nuxt3 beta + Quasar でプロジェクトを作ってみたのでメモ

Nuxt3 rc の新規プロジェクトを作成する

Nuxt3 Installation の手順に沿って作成をします。

Nuxt CLI のバージョンを上げつつアプリケーションを作成します。

npx nuxi init nuxt3-quasar

VSCode でプロジェクトを立ち上げます。

code -r nuxt3-quasar

node_modules のインストールをします。

npm install

アプリケーションが立ち上がることを確認します。

npm run dev -- -o

お疲れ様です！新規プロジェクトの作成が完了しました！

---

UI framework を追加する

今回は UI framework に Quasar を使います。

Quasar を追加します。

npm install quasar

nuxt3-quasar 直下に plugins フォルダーを作成します。

mkdir plugins

作成したフォルダーに移動します。

cd plugins

移動後に、plugins フォルダー配下に quasar.ts を作成します。

touch quasar.ts

作成した quasar.ts に以下を記述します。

plugins/quasar.ts

import { Quasar } from 'quasar'
import * as components from 'quasar'
import {
  ClosePopup as vClosePopup,
  Intersection as vIntersection,
  Morph as vMorph,
  Mutation as vMutation,
  Ripple as vRipple,
  Scroll as vScroll,
  ScrollFire as vScrollFire,
  TouchHold as vTouchHold,
  TouchPan as vTouchPan,
  TouchRepeat as vTouchRepeat,
  TouchSwipe as vTouchSwipe,
} from "quasar";
import langJa from 'quasar/lang/ja'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Quasar, {
        config: {},
        components,
        directives: {
            vClosePopup,
            vIntersection,
            vMorph,
            vMutation,
            vRipple,
            vScroll,
            vScrollFire,
            vTouchHold,
            vTouchPan,
            vTouchRepeat,
            vTouchSwipe,
        },
        plugins: {},
        // ここは Quasar 側の lang 設定なので好みです。
        lang: langJa
    })
});

お疲れ様です！これで UI framework の追加は完了です！

Nuxt2 で実施していたような nuxt.config.ts に対する呼び出しの設定は不要です！

---

UI framework 用の CSS を追加する

UI framework の追加は終わったので Quasar 用の CSS の設定をします。
nuxt.config.ts の中身を以下のように修正します。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
    // UI framework 用の CSS の参照パス
    css: [
        'quasar/dist/quasar.prod.css'
    ],
});

お疲れ様です！これで UI framework 用の CSS の追加は完了です！

---

SSR から SPA へ変更する

UI framework の Quasar は現状 Nuxt の SSR に対応をしていない為、実行モードを SPA に変更します。

nuxt.config.ts

export default defineNuxtConfig({
    ssr: false
});

お疲れ様です！これで SSR から SPA への切り替えは完了です！

---

動作確認をする

app.vue の中身を以下のように修正します。

app.vue

<script setup lang="ts">
const samplelabel = "nuxt3";
const sampleText= ref<string>("hello nuxt3");
</script>

<template>
  <div>
    <!-- Remove this component to get started! -->
    <!--    <NuxtWelcome />-->
    <q-btn :label="samplelabel" />
    <q-input filled v-model="sampleText" />
  </div>
</template>

先に build を行います。

npm run build

アプリケーションを立ち上げます。

npm run dev -- -o

お疲れ様です！以下の画像のように表示できれば成功です！

お疲れ様です！Nuxt3 beta の新規プロジェクトの作成は完了です！
今回作成した nuxt3-quasar も公開してあるので参考程度にどうぞ！