💎

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

2021/10/13に公開約2,500字

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 * as directives from 'quasar'
import langJa from 'quasar/lang/ja'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Quasar, {
        config: {},
        components,
        directives,
        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,
    target:"static",
});

お疲れ様です!これで 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 も公開してあるので参考程度にどうぞ!

Discussion

ログインするとコメントできます