My Vue component is not appearing on the screen and I am unable to identify the issue. I have checked my console for errors and I am using npm run hot
Here is my app.js file:
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('follow-button', require('./components/FollowButton.vue').default);
const app = new Vue({
el: '#app',
});
This is my FollowButton.vue component:
<template>
<div>
<button class="btn btn-primary ml-4" v-text="buttonText"></button>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
The section where the Vue component should be rendered:
extends('layouts.app')
@section('content')
// Content here
@endsection
I have included this in my <head> section:
<script src="{{ asset('js/app.js') }}" defer></script>
Even after changing it to:
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
<script defer src="{{ mix('js/app.js') }}"></script>
The Vue component still does not display. I have also tried solutions from here but none of them worked for me.