I created a new project with vue-cli, then added vuetify with vue add vuetify. Opened the site and saw a blank page with a useless scrollbar
I tried mounting app without actually App component, but the problem still exists. It vanishes only when I remove import './plugins/vuetify'
main.js
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Advertisement
Answer
Just add the following to your css style :
html { overflow-y: auto }
This default behaviour of vuetify is explained here (https://vuetifyjs.com/en/getting-started/frequently-asked-questions/#scrollbar-overflow):
Vuetify uses a slightly modified version of ress reset which by default turns on the html scrollbar to normalize behavior between browsers. This is a design choice and has been debated numerous times. There are pros and cons to having and not having it and as of now, the vote is in favor of leaving it as is. If you wish to disable this functionality, simply add
html { overflow-y: auto }to your style file. Find more information on the CSS Reset page