Even though there are no errors in the browser and Webpack compiles successfully, the message "hello from dashboard" is not displaying on the page.
I am currently using Vue version 2.6
In my main.js file:
import Vue from 'vue'
Vue.component('dashboard', require('@comp/dashboard.vue').default);
const app = require('@/App.vue').default; // The app component is working fine
import "./css/app.css"
new Vue({
render: h => h(app) // The app component is working fine
}).$mount('#app')
In dashboard.vue file:
<template>
<div>
Hello from dashboard
</div>
</template>
<script>
export default {
name: "dashboard"
}
</script>
In index.html file:
<body>
<div id="app">
<dashboard></dashboard>
</div>
</body>
Upon inspecting the rendered HTML in the browser, the message "hello from dashboard" is still missing :(
<body>
<div id="app">
<dashboard></dashboard>
</div>
</body>