Vuetify upgrade to 2

This article shows you how to update Vuetify on your existing project built with Vuetify 1 to the newly released Vuetify 2. This assumes that you have a Vue project using the Vuetify components library.

Since Vuetify 2 is adopting the new Google Material Design 2, please check after the update all your components for style changes and adjust where needed.

First, two commands to remove the Vuetify 1 lib from your project and to add Vuetify 2 to your node_modules:

npm remove --save vuetify

npm install --save vuetify@latest

If you try to build your project at this point, you will likely get the following error:

This dependency is not found:

* vuetify/src/stylus/app.styl in ./src/plugins/vuetify.js

That is because Vuetify changed the style language from Stylus in Vuetify 1 to Sass in Vuetify 2. Find your vuetify.js config file (mine is in /src/plugins/vuetify.js) and do the following changes:

* Delete import 'vuetify/src/stylus/app.styl'

Replace with

import 'vuetify/dist/vuetify.min.css'

In my Vuetify 1 project, I also had a custom primary color. This is how the instantiation of Vuetify changes on vuetify.js:

Before
======

Vue.use( Vuetify, {
           theme: {
             primary:'#01884e'
           }
        })

After
=====

Vue.use( Vuetify )

export default new Vuetify({
                     theme: {
                       themes: {
                         light: {
                           primary: '#01884e'
                         }
                       }
                     }
                   })

The only thing left is to add Vuetify in your Vue instance. This is done in main.js file:

import Vuetify from '@/plugins/vuetify' //your path to vuetify.js file could be different

//then we add Vuetify to our Vue instance

new Vue({
      Vuetify
}).$mount('#app')

Hoping this Vuetify 2 upgrade guide has helped you on how to update Vuetify without hassle, I wish you happy coding.