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
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
yarn add material-design-icons-iconfont
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:
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.