# Frequently asked questions

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.

# Table of Contents

# Questions

Have a question that belongs here? Tell us in our Discord Community or create a request on our Issue Generator.

  • When will Vuetify v3 be released?

    Version 3 is currently under development and slated for release in Quarter 1 of 2021. Follow our progress on Notion or read and overview of what’s to come on our Roadmap.


  • 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.

// webpack.config.js

module.exports = {
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // Requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),
            indentedSyntax: true // optional
          },
          // Requires sass-loader@^8.0.0
          options: {
            implementation: require('sass'),
            sassOptions: {
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
  ],
}

  • Why is Search Vuetify not working properly?

    At the moment, Algolia docsearch only crawls the main production site: https://vuetifyjs.com/.



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

    Yes, you can view grid examples here.


  • 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 application is not working.

    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 seeing $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 currently an ongoing Github discussion with potential work-arounds in a variety of use-cases.


  • I’m seeing Error in ./node_modules/vuetify/src/dir/file.js Module parse failed: Unexpected token (<lineno>:<characterno>) in the terminal.

    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/lib.



  • How do I extend Vuetify components?

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

// src/components/ActivateBtn
import { VBtn } from 'vuetify/lib'

export default {
  extends: VBtn,

  methods: {
    // Here we overwrite the genContent method of VBtn
    // to override the default genContent method
    genContent() {
      return this.$createElement('div', {
        staticClass: 'v-btn__contents'
      }, [
        'Activate ',
        this.$slots.default
      ])
    }
  }
}

  • 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.


  • Menu/Dialog/Navigation drawer are not opening properly.

    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 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.

  • How do I vertically center content?

    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 / link is active when I’m on /home page.

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


  • Why isn’t my application responsive on mobile devices?

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

<!-- public/index.html -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
</html>

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

    You can find more information in our icon guide.


  • Why does <v-dialog> close 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.

<!-- Vue Component -->
<template>
  <div>
    <v-dialog v-model="dialog">
      <v-card>...</v-card>
    </v-dialog>

    <v-btn @click.stop="dialog = true">
      Open Dialog
    </v-btn>
  </div>
</template>

<script>
  export default {
    data: () => ({
      dialog: false,
    }),
  }
</script>


  • How do I 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 is located on the Long-term Support page.




  • 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, simply add ‘vuetify’ to the transpileDependencies array in vue.config.js.


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

    Update the compilerOptions key in tsconfig.json with the vuetify type:

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vuetify"]
  }
}

# I Need Help

If you need help with an issue, please use one of our help channels:


For additional inquiries, please reach out to John Leider or Heather Leider.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Contributing
Getting started
Direct support
Introduction
Treeshaking
Features
Edit this page on GitHub