''laravel8 + vue3 Cannot read properties of undefined (reading 'component')'

'laravel8 + vue3 error Uncaught TypeError: Cannot read properties of undefined (reading 'component')

how can this error be avoided ?

app.js

window.Vue = require('vue').default;
Vue.component('hello', require('./hello.vue').default);
const app = new Vue({
    el: '#app'
});

welcome.blade.php

<body class="antialiased">
    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
        <div id="app">
            <hello></hello>
        </div>
    </div>
    <script src="{{mix('js/app.js')}}"></script>
</body>

hello.vue

<template>
    <div>
        Hello World!
    </div>
</template>

package.json

"devDependencies": {
    "@vue/compiler-sfc": "^3.2.11",
    "axios": "^0.21",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "vue": "^3.2.11",
    "vue-loader": "^16.5.0"
}

this error appears in vue3

tell me how to avoid it

laravelvue.jsvuejs2vue-componentlaravel-8


Solution 1:[1]

in Vue3 Your app.js should be like that:

require('./bootstrap');

import { createApp } from 'vue';
import hello from './components/hello.vue';

let app=createApp({})
app.component('hello' , hello);

app.mount("#app")

Solution 2:[2]

You are using Vue2 setup. Change it to vue3 as above mentioned.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Forbidenn
Solution 2 Eccentric Soul

Related Questions