I am working in a Laravel 8.x application and have had vue 2.6.12 installed for the longest time. I am working on upgrading to use Vue 3 with laravel and am using with Webpack. I have updated my package.json scripts and have the following installed for Vue 3 compatability:

{
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "bootstrap": "^4.5.2",
        "jquery": "^3.4",
        "laravel-mix": "^6.0.39",
        "laravel-mix-polyfill": "^2.0.0",
        "vue-loader": "^16.8.3"
    },
    "dependencies": {
        "@vue/compiler-sfc": "^3.2.24",
        "jquery-validation": "^1.17.0",
        "jquery.nicescroll": "^3.7.6",
        "jquery.scrollto": "^2.1.2",
        "mdb-vue-ui-kit": "^1.7.0",
        "sass": "^1.21.0",
        "sass-loader": "^7.1.0",
        "vue": "^3.2.24",
        "vue-moment": "^4.1.0",
        "vue-router": "^4.0.12",
        "vue-template-compiler": "^2.6.14",
    }
}

I never had a main App.vue file as this started as a Laravel app and Vue was brought in later. Instead I have created (with vue 2 and vue3 now) the initial vue object in my /resources/js/app.js file. This just keyed off of a <div id="app"> located in my parent blade.php file. But now with Vue 3 I am unsure how to do this without manually adding an App.vue file. Is this needed or is there something else I can do to configure vue 3 instantiation in my Laravel app?

Vue 2 setup (working)

const router = new VueRouter({
  mode: 'history',
  routes: routes
});

const app = new Vue({
  el: '#app',
  router
});

Vue 3 instantiation attempt

import Vue, {createApp } from 'vue';
import router from './router/routes.js';
const app = new Vue({});

createApp(app)
    .use(router)
    .use(require('vue-moment'))
    .use(VueToast)
    .mount('#app')

Main error I get when running npm run dev

WARNING in ./resources/js/app.js 50:14-17
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, one rrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

CodePudding user response：

You can register global components to the app you are creating.

import {createApp, defineComponent } from 'vue';
import router from './router/routes.js';
import MyComponent from '@/components/MyComponent.vue'

// Root vue component
const root = defineComponent({/* ... */})

//Create the app
const app = createApp(root)

//Configure the app
app.use(router)
   .use(require('vue-moment'))
   .use(VueToast)

//Attach global components to the app
app.component('my-component', MyComponent)

//Mount the app
app.mount('#app')