Add Vuetify to your existing VueJS App

Published in

VueJoy

2 min readMay 21, 2018

Vuetify is a great framework of components based on Material Design that will help you build really beautiful user interfaces.

If you choose to build a new app, Vuetify has premade Vue templates that help you get started with Vuetify even faster.

If you just want to add Vuetify to your existing projects, you just need to follow this tutorial.

yarn add vuetify

After that, you then need to tell Vue to use Vuetify (in most case, in themain.js file).

import Vue from 'vue' 
import Vuetify from 'vuetify' 
import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify)

Some components are using icons, so you also need to import them, you can do that by importing them into your index.html file. We do this by importing them with the font Roboto (in the same href link).

<head> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> </head>

Alternatively, for Material Icons, you can use yarn and import the css into the main.js file.

yarn add material-design-icons-iconfont

Import the css this way:

import 'material-design-icons-iconfont/dist/material-design-icons.css'

To finish, you need to add a v-app component that wraps your entire application in order to make Vuetify works.

<v-app id="app">
  <router-view/>
</v-app>

With our setup, we have access to all of Vuetify components. Let’s check its integration by adding one of its most simple components: v-btn.

<template>
  <div>
    <v-btn color="success">Success</v-btn>
    <v-btn color="error">Error</v-btn>
    <v-btn color="warning">Warning</v-btn>
    <v-btn color="info">Info</v-btn>
  </div>
</template>

Here’s what you should see in your browser as a result:

We can see four buttons using the robot fonts and Material design. We have successfully integrated Vuetify into our app. It will greatly speed up our development.

That’s all for this tutorial. Feel free to develop your UI with Vuetify now!

As always, you can find the source code of a project illustrating this tutorial on Github.

Originally published at blog.vuejoy.com.

Add Vuetify to your existing VueJS App

Written by Jean-Philippe Fong