To include Vuetify into an existing project, you must pull it into your node_modules. You can use either
to accomplish this task. These are both package managers that allow you to
control what resources are available to your application.For a detailed explanation of how to get
running in your environment, check out the official documentation
Alternatively, if you wish to use yarn, you can find the official documentation here
. Once setup, you can run either command from your command prompt.
$ npm install vuetify
$ yarn add vuetify
Once Vuetify has been installed, navigate to your applications main entry point. In most cases this will be
. In this file you will import Vuetify and tell Vue to use it.
import Vue from 'vue'
import Vuetify from 'vuetify'
You will also need to include the Vuetify css file. Simply include the Vuetify css file in your
or import the actual stylus file or the minified css.
// index.js or main.js
import('path/to/node_modules/vuetify/dist/vuetify.min.css') // Ensure you are using css-loader
@import 'path/to/node_modules/vuetify/src/stylus/main.styl' // Ensure you are using stylus-loader
The easiest way to include the Material Design icons is to add a
tag to your
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
Warning: While Vuetify attempts to not cause any css collision as much as possible, there is no guarantee that your custom styles will not alter your experience when integrating this framework into your existing project.