Add Vuetify to your Vue.js App

Vuetify is a semantic development framework for Vue.js. Built with Material Design, it aims to provide all the tools necessary to create beautiful content-rich applications.

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’
import ‘vuetify/dist/vuetify.min.css’

Some components are using icons, so for that we need to import them, into the index.html file.

<link href=’,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.

<v-app id=”app”>

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 webpack.config.js file

We have successfully integrated Vuetify into our app. It will greatly speed up our development.

Why Vuetify

  1. 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.
  2. 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.
  3. 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.
  4. 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