[Vuejs]-Vue 3 Component not displaying in Laravel Project

by

0👍

✅

i cant comment because of my score, sorry to have to do it like an awnser..

are you sure that app.component('home', Home); line is the right way to import a comp?
because from what i find, this would be the

Vue.component('home', require('./components/Home.vue').default);

whould be the way.

0👍

have you tried to change the tag in your blade from <Home />to <home /> ?
As wrote by another user before you must add .default in your row where you import the component

0👍

basically needed to add some of what I was adding to app.js to the .vue file to get it working such as the import from vue.

0👍

This is an old question, but from what I see, you did not receive a satisfactory response/solution for your problem yet.

I had the same problem/a very similar upgrading a very old Laravel project (started about 9 years ago on an old Laravel version) from AngularJS to Vue3: Despite all attempts and a very barebone setup, the Vue root app component did not load.

The solution was to ensure that the "main" app.js file was being loaded using the script defer tag. Thus, in your blade file, change:

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

to

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

As a sidenote, there is a typo in this line in your original question: Change script scr to script src 🙂

Leave a comment