CODEWITHSUNDEEP
laravelvue.jsvuejs3
CodeConnoisseur
CodeConnoisseur

Reputation: 1869

How to instantiate a vue 3 application within Laravel without using a parent App.vue?

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, onErrorCaptured, 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)

Upvotes: 2

Views: 2374

Answers (1)

Donkarnash
Donkarnash

Reputation: 12835

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')

Upvotes: 5

Related Questions