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

Question

'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

Penny · Accepted Answer · 2021-09-16 14:59:47Z

8

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

answered Sep 16, 2021 at 14:59

Penny

16412 bronze badges

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

Comments

Eccentric Soul · Accepted Answer · 2022-03-26 17:34:49Z

0

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

answered Mar 26, 2022 at 17:34

Eccentric Soul

15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related