💎

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

3 min read

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

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

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

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

npx nuxi init nuxt3-quasar-app

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

code -r nuxt3-quasar-app

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

npm install

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

npm run dev -- -o

UI framework を追加する

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

Quasar を追加します。

npm install quasar

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

mkdir plugins

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

cd plugins

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

touch quasar.js

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

plugins/quasar.js
import { Quasar } from 'quasar'
import * as All from 'quasar'

export default ({ app }) => {
    app.use(Quasar, {
        config: {},
        component: All,
        plugins: {
        }
    });
};

CSS を追加する

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

nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
    css: [
        'quasar/dist/quasar.prod.css'
    ],
});

動作確認をする

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

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

<script setup lang="ts">
import { ref } from '@vue/reactivity';

const samplelabel = "nuxt3";
const sampleText= ref<String>("hello nuxt3");
</script>

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

npm run dev -- -o

以下の画像のように表示できれば成功です!

TODO

CSS の利用時の Server Side Rendering Error を解消する ( 多分やらない )

Server Side Rendering Error: TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received 'I:\\vue\\nuxt3-quasar-app\\\x00virtual:I:\\vue\\nuxt3-quasar-app\\.nuxt\\css.mjs'
    at statSync (node:fs:1519:10)
    at tryStatSync (node:internal/modules/esm/resolve:122:13)
    at finalizeResolution (node:internal/modules/esm/resolve:314:17)
    at moduleResolve (node:internal/modules/esm/resolve:756:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:867:11)
    at Loader.resolve (node:internal/modules/esm/loader:89:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
    at Loader.import (node:internal/modules/esm/loader:177:28)
    at importModuleDynamically (node:internal/modules/esm/translators:116:35)
    at exports.importModuleDynamicallyCallback (node:internal/process/esm_loader:30:14) {
  code: 'ERR_INVALID_ARG_VALUE'

Discussion

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