Add Vuetify to your Vue.js App
Installation of Vuetify
npm add vuetify
After that, we need to tell Vue to use Vuetify (in the main.js file)
import Vue from ‘vue’
import Vuetify from ‘vuetify’
Some components are using icons, so for that we need to import them, into the index.html file.
<link href=’https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel=”stylesheet”>
To finish, we need to add a v-app component that wrap entire application in order to make Vuetify works.
Add Vuetify components
Here’s what you should see in your browser as a result:
Let’s preview the application, by running the
npm run dev command in the project’s root directory. It should automatically open your default browser to
https://localhost:8080. If you need to change the port, you can modify the server configurations in the
We have successfully integrated Vuetify into our app. It will greatly speed up our development.
- Vibrant Community
Get ready to enjoy one of the most active communities. Stuck on a problem? Get help right now. Find a bug? Want to talk about Firebase?. The Core team responds and reacts to issues as they happen.
- Material Toolkit
Vuetify is built from the ground up to be semantic. Easy to learn, easy to remember — this means that whether you are developing your own application, or onboarding a new developer, Vuetify’s write-as-you-speak components and properties make development a breeze.
- Continuous Updates
Vuetify has a consistent update cycle, allowing you to get your hands on bug fixes and enhancements more often. The development team is committed to providing you with the best experience you can have.
- Amazing Support
Vuetify is patched weekly, responding to community issues and reports at breakneck speed. Feel confident knowing your application will be supported and updated frequently with fixes and new features.
Published by Dinesh Kumar