Scrollbar shown by default using Vuetify 3

Question

I am trying to use Vuetify (3.4.7) in my Vue 3 project, but for some reason, when I start the server, I am getting an empty scrollbar on the screen that I can not manage to make disappear.

Below, you can see a photo of the problem and my code:

Problem: empty scrollbar

main.js:

import { createApp } from "vue";

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

import App from "./App.vue";


const vuetify = createVuetify({
    components,
    directives,
  })

createApp(App).use(vuetify).mount("#app");

App.vue:

<template>
  <Navbar />
</template>

<script>
import Navbar from "@/components/Navbar.vue";

export default {
  name: "App",
  components: {
    Navbar,
  },
};
</script>

<style lang="scss"></style>

Navbar.vue:

<template>
  <div>teste</div>
</template>

<script>
export default {
  name: "Navbar-Component",
};
</script>

<style>
</style>

Answer 1

The Vuetify team, for whatever reason, has by default included CSS that automatically displays the vertical scrollbar. This is an issue on their Github, now closed with explanation that they won't fix it.

To change this styling, you can apply your own CSS to override

html { 
  overflow-y: auto !important 
}

This can be added to any global stylesheet in your project.