VueJs component is not loading in laravel 9

Question

I tried to install laravel and integrate vuejs with it. vuejs component is not loading in laravel project.

My blade code is:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <script src="{{ asset('js/app.js') }}" defer></script>

    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <example-component></example-component>
    </div>
</body>
</html>

My app.js

require('./bootstrap');

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

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

hmc · Accepted Answer · 2022-02-26 17:33:02Z

1

Your app.js looks like using Vue2.

Did you install Vue2 on your Laravel?

Try to install Laravel Breeze. It will install Vue for you. I guess the installed version would be Vue3, not Vue2.

https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia

Here is some guide for using Vue 3 on Laravel 8, but it should also work on Laravel 9. I think you can follow its app.js

https://techvblogs.com/blog/how-to-install-vue3-laravel

answered Feb 26, 2022 at 17:33

hmc

112 bronze badges

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

2 Comments

ITtraders Nepal Over a year ago

I have installed vue3.

ITtraders Nepal Over a year ago

It works fine if i use app.mount('#app') , it create problem if i use const app = new Vue({ el: '#app', });

Collectives™ on Stack Overflow

VueJs component is not loading in laravel 9

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related