Vue3、vuetify3を使ったカスタマイズビュー

何を実現したいのかを書きましょう

タイトルの通りですが、現在、vuetify3を使ったシングルページアプリを作成するために勉強しております。
vue3+vuetify3のとっかかりすらできておらず、どなたかご存じの方おられましたらご教示いただけないでしょうか。

発生した問題やエラーメッセージを具体的に書きましょう

以下ページを参考(コピペ)に、vue2を使ったカスタマイズビューの作成、100件以上のレコード取得&表示、データ更新など一通りの処理はできたのですが、
いざこれをvue3にアップグレードしようとすると、html上は要素データがあるように見えるのですが、まったく表示されませんでした。
ですのでまずは基本形の勉強をと思い、シンプルなコードで作成しようと「実行したコードをコピー&ペーストしましょう」の通り内容を削減しました。

参考ページに誤りがありましたので変更しました↓
Vue.js+Vuetify.jsを使って、レコードの一覧と詳細をシングルページで作成しよう!

実行したコードをコピー&ペーストしましょう

以下のように設置しました。
コンソール上は特にエラー出ておらず、console.info()で表示した各オブジェクトの構造等が表示されます。
スクリーンショット 2023-12-04 161312

JavaScript / CSSでカスタマイズ(上から順に)

https://cdn.jsdelivr.net/npm/vue@3.3.9/dist/vue.global.prod.js
https://cdn.jsdelivr.net/npm/vuetify@3.4.4/dist/vuetify.min.js
下のJSファイル

HTML

ここのワイヤフレーム"Baseline"をコピペし、<div>タグで囲っております。
vuetify wireframes

<div id="app">
	<template>
	  <v-app id="inspire-app">
	    <v-navigation-drawer v-model="drawer">
	      <!--  -->
	    </v-navigation-drawer>

	    <v-app-bar>
	      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

	      <v-app-bar-title>Application</v-app-bar-title>
	    </v-app-bar>

	    <v-main>
	      <!--  -->
	    </v-main>
	  </v-app>
	</template>

	<script setup>
	  import { ref } from 'vue'

	  const drawer = ref(null)
	</script>

	<script>
	  export default {
	    data: () => ({ drawer: null }),
	  }
	</script>
</div>

JS

((Vue,Vuetify) => {

    const events = {
        view:[
            'app.record.index.show',
            'mobile.app.record.index.show'
        ],
      }

      kintone.events.on(events.view, (e) => {
        console.info('trigger : "app.record.index.show" is started.')
        if (e.viewId !== 5532370) {return e}

        const mountTarget = document.getElementById('app')
        if (!mountTarget){return e}

        console.info('start vue3 test')
        console.info(Vue.version);
        console.info(Vuetify.version);

        const app = Vue.createApp()

        const vty = Vuetify.createVuetify();
        console.info('created vue instance')
        console.info(app)

        console.info('now use vuetify')
        console.info(vty)

        app.use(vty)
        console.info('vuetify was applied on vue!')
        console.info(app)

        app.mount(mountTarget)
        console.info('vuetify was mounted on vue!')

      });
})(Vue,Vuetify);

vue2でのOptionsAPIの形式であれば一旦は表示する事ができました。
まだまだ勉強する事がたくさんある状況ですが、表示する事はできましたのでクローズさせていただきます。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。