'VueJs component is not loading in laravel 9

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',
});
vue.jslaravel-9


Solution 1:[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

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 hmc

Related Questions