After creating a new Vue project with Vue CLI 3 and deleting all default views and components, I created two new views. None of them appears when changing url and instead I see blank page and no errors in console. In Chrome DevTools inspector I see that <div id="app"></div>
is empty. Vue.js Devtools plugin doesn't trigger Vue on the page at all. I think I might miss something in my settings but can't find what can cause such behaviour.
This 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');
This is my App.vue:
<template>
<div id="app">
<router-view />
</div>
</template>
This is index.js of 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;
This is 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";
`,
},
},
},
};
Home.vue:
<template>
<h1>Home page</h1>
</template>
<script>
export default {
name: 'home',
};
</script>