VueJoy

About

Add Vuetify to your existing VueJS App

Vuetify is a great framework of component 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.

Installation of Vuetify

yarn add vuetify

After that, you then need to tell Vue to use Vuetify (in most case, in the main.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 'material-design-icons-iconfont/dist/material-design-icons.css'

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

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

Add vuetify components

With our setup, we have access to all of Vuetify components. Let's check the integration of Vuetify by adding some Vuetify buttons.

<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:

add vuetify

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.