VueJS 3 + Laravel : Uncaught TypeError: Cannot read property 'component' of undefined

Question

Hello everyone i have little problem with starting Vue on my Laravel project.

This is my package.json

"devDependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.32",
        "@fortawesome/free-brands-svg-icons": "^5.15.1",
        "@fortawesome/free-regular-svg-icons": "^5.15.1",
        "@fortawesome/free-solid-svg-icons": "^5.15.1",
        "@vue/compiler-sfc": "^3.0.5",
        "axios": "^0.21",
        "bootstrap": "^4.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.0-beta.17",
        "laravel-mix-vue3": "^0.7.0",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2",
        "vue-template-compiler": "^2.6.10"
    }

Webpack mix:

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

And this is my app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
require('./fontawesome');

window.Vue = require('vue').default;

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('user-info', require('./components/UserInfo.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

I have component UserInfo which i include in my blade.php and i get Uncaught TypeError: Cannot read property 'component' of undefined

I upgrade with vue 3 because with vue 2 againt the same errors — Nikolaev23
– Nikolaev23, Commented Jan 14, 2021 at 22:24

Boussadjra Brahim · Accepted Answer · 2021-01-14 22:36:54Z

15

The global is changed in Vue 3 and you must use createApp function to create an app instance :

import { createApp } from 'vue';
require('./bootstrap');
require('./fontawesome');

let app=createApp({})
app.component('user-info', require('./components/UserInfo.vue').default);
app.mount("#app")

For more setting up a full app using vue 3 and laravel please check this answer

answered Jan 14, 2021 at 22:36

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nikolaev23 Over a year ago

Thanks a lot .. now vue load into Laravel .. only shows in console : [Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.

Boussadjra Brahim Over a year ago

you're welcome, the issue is probably coming from UserInfo.vue please edit your question by adding its content

nazmul nafiz · Accepted Answer · 2022-06-21 17:57:02Z

0

Try this code may be help

require('./bootstrap');

import {createApp} from 'vue';

import VueRouter from 'vue-router';

import {routes} from './routes.js';

const router = new VueRouter({



routes,

  mode:'history'



})



createApp().use(router).mount('#app')

answered Jun 21, 2022 at 17:57

community wiki

nazmul nafiz

Collectives™ on Stack Overflow

VueJS 3 + Laravel : Uncaught TypeError: Cannot read property 'component' of undefined

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related