以前使ってたんですよね。Vue UIライブラリとしてVuetifyを。
なので、今回も実現してみようかと…
ヘッダー、フッター、サイドメニューみたいな2ペインって言うんですか？そんなレイアウトで。

Vue3だとVuetifyもバージョン3なんです？！
2と何がちがうんです？！

こっちも、目を離した隙に進化してますか…orz
まぁ、インストールしていきます。

% sail npm install vuetify@next --save-dev

あと、ViteでVuetifyをTree Shakingしてくれるらしいプラグインも一緒にインストールします。

% sail npm install vite-plugin-vuetify --save-dev

そして、Viteの設定ファイル vite.config.js も修正します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';  // <-- ここ

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        // ↓ ここから
        vuetify({
            autoImport: true,
        }),
        // ↑ ここまで
    ],
});

折角なので、 resources/js/components/App.vue もちょっと変更してみます。（ちょっと適当にｗ

<template>
    <v-app>
        <v-main>
            <v-card>
                <v-card-title>
                    <h1>Laravel9、さわり始めました。</h1>
                </v-card-title>
            </v-card>
        </v-main>
    </v-app>
</template>

Vuetifyを読み込むために、resources/js/app.js ファイルに追記します。

import './bootstrap';
import { createApp } from "vue";
import 'vuetify/styles';                    // <-- ここ
import { createVuetify } from 'vuetify';　　　　　　　　// <-- ここ
import App from "./components/App.vue"

const app = createApp(App);
const vuetify = createVuetify();　　　　　　　　　　　　　　　　　　　　　　　　// <-- ここ
app.use(vuetify);                           // <-- ここ
app.mount("#app");

とくにバージョン3でなにか変わったのかどうかは、未だわかってないけれども、まぁ、表示できてよかった。（のかどうかもわからないｗ