LaravelのbladeでVue.jsを使用する際、npmでVueを導入する方法（CDN使わない）

blade内にvueを定義しています。
CDNでの導入は簡単でしたが、npmでの導入は詰まったのでやり方残します。

パッケージの導入

npm install vue
npm install @vitejs/plugin-vue

vite.config.jsの追記

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

export default defineConfig({
    plugins: [
        vue(), // 追記
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js', // 追記
        },
    },
});

resources/js/bootstrap.jsの追記

// vue.jsの導入（これで各bladeではcreateAppで呼び出せる）
import { createApp } from 'vue';
window.createApp = (options) => {
    return createApp(options);
};

各bladeにvueを記載する方法

<script type="module">
        createApp({
            data() {
                return {
                    selectedType: 10,
                };
            },
            methods: {
            },
        }).mount('#app');
    </script>

以上となります。
npm run devでご確認ください。