Existing applications
To include Vuetify into an existing project, you must pull it into your node_modules. You can use either
npm
or
yarn
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
npm
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
# or
$ yarn add vuetify
Once Vuetify has been installed, navigate to your applications main entry point. In most cases this will be
index.js
or
main.js
. In this file you will import Vuetify and tell Vue to use it.
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
You will also need to include the Vuetify css file. Simply include the Vuetify css file in your
index.html
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
// main.styl
@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
link
tag to your
index.html
file.
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
</head>
warningWarning: 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.