Vue – How To Install Vuetify

What is Vuetify?

Vuetify is a collection of pre-made components paired with powerful features such as dynamic themes, global defaults, application layouts, and more. Its goal is to provide developers with all of the necessary tools to build rich and engaging user experiences.

Here are some important links:

• Vuetify Documentation: Support Docs
• Add Vuetify to Existing Project: Helpful Video
• Vuetify Play: Playground

How do to install Vuefity into the project?

Start by adding the following code via the terminal:

npm install vuetify --save

We can check if it has been installed correctly by using:

npm list vuetify

How do we mount Vuetify to the project?

We need to update our “main.js” file to include the following

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

Finally, we need to mount the app and include Vuetify:

createApp(App).use(vuetify).mount('#app')