Stuck on a particular problem? Check some of these common gotchas before creating a ticket. If you still cannot find what you are looking for, submit an issue on github or ask the community in discord.

Why does Vuetify not match Material Design 2

The MD spec was updated in May of 2018, during the middle of beta testing for v1.1. Because of this, there are plenty of components that will not match the new spec. We will be updating the styles and functionality to match in a future release.

My code doesn't work - what should I do

First, ensure that you're using the latest version of Vue.js and Vuetify. Try to reproduce it in codepen using the following template. If you are unable to reproduce the issue outside of your environment, this usually means the issue resides locally. If you are still unable to resolve your issue, please provide your codepen and issue in #need-help in the community.

I'm receiving an error similar to the following:
Error in ./node_modules/vuetify/src/dir/file.js Module parse "failed": Unexpected token (<lineno>:<characterno>)

If you're using an IDE, such as IntelliJ IDEA or WebStorm, it will often add automatic imports pointing to the vuetify/src/ directory for components you use. Change the import statement path from vuetify/src/ to vuetify/es5/.

My application does not look correct

Vuetify requires the use of the v-app component. It should wrap your entire application and is the center point for much of the framework functionality including themes.

Ensure that your components are wrapped with a v-app element. If you are using an element to activate the component that is not placed into the activator slot, ensure that you stop propagation of the click event. These components utilize the v-outside-click directive and will immediately close.

The scrollbar is showing even though my content is not overflowing vertically.

Vuetify by default turns on the html scrollbar. 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.

How to center vertically

Apply the fill-height prop to v-container. This helper class normally only adds height: 100%, but for the container, it also looks for a child v-layout and applies the needed classes to vertically center the content.

Add the exact to the link that points to absolute /. For more information on this, you can visit the official Vue router documentation.

My page on mobile is not responsive

Ensure that you have the proper meta tags inside of the <head> section of your index.html.

Edit this page | language on Github