Getting Started - Vue Material

Introduction

Vue Material is the best integration between Vue.js and Material Design specs! You can easily configure it to suit all your needs through an easy API.

The documentation is divided by Themes, Components and UI Elements. The themes area is the definitive guide on how to theme your application (or write your own themes). The Components and UI Elements parts shows live examples, along with an API Table of each component/resource.

Vue Material Documentation assumes that you are comfortable with Vue.js 2.5+. If you are new to Vue.js, it might not be the best idea to learn from here as your first step - grasp the basics then come back. The Vue.js website is the greatest documentation source for you to start with.

Installation

You can install Vue Material through NPM or Yarn:

$ npm install vue-material --save
$ yarn add vue-material

Code copied!

It's optional, but to have the best experience possible, use Roboto and Google Icons from Google CDN:

Roboto Font and Icons  
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"> Code copied!

Usage

To use Vue Material in your application, you can import only the components that you're really using. This will allow you to make your build way more compact than installing a full bundle.

Individual components  
import Vue from 'vue'
import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs) Code copied!

Although is not recommended you can use the full bundle of Vue Material. This will import ALL components and UI Elements, and will hurt performance:

Full Bundle  
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(VueMaterial) Code copied!

Although is not the recommended approach, you can always use CDNs for fast prototyping:

For better integration with Vue Material, use vue-cli.

CDN  
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
    <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
  </head>

  <body>
    <div id="app">
      <!-- Your code here -->
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-material"></script>
    <script>
      Vue.use(VueMaterial.default)

      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html> Code copied!