Upon initializing a fresh Vue project using Vue CLI 3 and removing all default views and components, I proceeded to add two new views. To my surprise, these views did not render when changing the URL; instead, I was met with a blank page and no error messages in the console. Upon inspecting the elements with Chrome DevTools, I noticed that the <div id="app"></div> appeared empty. Even the Vue.js Devtools plugin failed to detect Vue on the page. It seems like there might be a misconfiguration in my settings, yet I am unable to pinpoint what could be causing this peculiar behavior.
This is the content of my main.js:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
Here is the code for my App.vue file:
<template>
<div id="app">
<router-view />
</div>
</template>
The following snippet is from the index.js file of the router:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Auth from '../views/Auth.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/auth',
name: 'auth',
component: Auth,
},
];
const router = new VueRouter({
mode: 'history',
scrollBehavior() {
return { x: 0, y: 0 };
},
base: process.env.BASE_URL,
routes,
});
export default router;
Below is the configuration from vue.config.js:
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
chainWebpack: config => {
config.module
.rule('js')
.use('babel-loader')
.loader('vue-loader')
.tap(options => {
return options;
});
},
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/styles/variables.scss";
@import "@/assets/styles/global.scss";
`,
},
},
},
};
Lastly, here is the content of the Home.vue file:
<template>
<h1>Home page</h1>
</template>
<script>
export default {
name: 'home',
};
</script>