For Enterprise

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, you can submit an issue on Github or ask the in our community.

My application won't compile due to sass / scss errors

Ensure that you are using the proper options object in accordance with your sass-loader version.

Are there examples on how the v2 grid compares to v1.5?

Error: Cannot find module 'node-sass'

Ensure that your @vue/cli packages located in package.json are at least ^3.5.0.

Invalid CSS after " @content": expected "}", was "($material-light); "

Ensure that you are using sass instead of node-sass in your package.json.

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 am receiving an err similar to the following:
$attrs is readonly and/or $listeners is readonly in the console

Vuetify utilizes Typescript and currently must import and extend the Vue object. This has the potential in some applications to generate a warning messages. There is currenty an on-going Github discussion with potential work-arounds in a variety of use-cases. If you have additional questions please join us in our online 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/.

Is there a codepen template with router

How do I extend Vuetify components

Vuetify components are easily extendable by importing it and using the extends option in vue. Codepen Example

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 you are following the proper markup documented in the Application page.

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

Vuetify uses the 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.

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.

My page on mobile is not responsive

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

How do I use Font Awesome, Material Design Icons or Material Icons?

You can find more information in our icon guide.

My dialog closes immediately after clicking the button

When not using the activator slot for v-menu and v-dialog for example, you must manually stop the propagation of the click event. To do this, simply add the .stop modifier to the click event.

Relative images are not working in v-card , v-img and other custom vuetify components

Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components. You can circumvent this issue by using require. If you're using Vuetify as a Vue CLI plugin, you can edit your project's vue.config.js file by modifying the options for vue-loader.

How do I upgrade to the latest version

All required changes are noted in the Upgrade Guide of our releases.

How do a report a bug or request a feature

In order to ensure all required information is provided, we have created an Issue Generator that helps you through the process. Any issue created not using the generator will automatically be closed, so please use it.

The vuetify-loader doesn't load all components

The vuetify-loader has limitations in dynamic components. Make sure to checkout the limitations section for more information.

How long will version 1.5 be supported?

Until July 2020. More information can be found on the Long-term Support page.

How do I get to the v1.5 documentation?

[Vue warn]: Unknown custom element:

Ensure that you have the latest version of vue-cli-plugin-vuetify and vuetify-loader installed in your package.json.

SCRIPT5022: Expected identifier, string or number

In order to support modern mode in vue-cli-3, vuetify/lib is not transpiled. You must tell vue-cli to transpile the vuetify package. This is configured automatically when installing the Vuetify cli plugin. If you are using an older version, simple add 'vuetify' to your vue.config.js transpileDependencies array.

When adding typescript - Error: Could not find a declaration file for module 'vuetify/lib'

Add the following to tsconfig file:

Caught a mistake or want to contribute to the documentation? Edit Layout or Content on GitHub!