Vuetify upgrade to 2

Bird Migration

A flock of birds on sunset

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:

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

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:

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *