Vue Material -

Getting Started

Disclaimer: This is a beta version. The API is not going to change, but be careful to use it in production.

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 and 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). And the Components and UI Elements parts shows live examples, along with a API Table of each component/resource.

Vue Material Documentation assumes that you are confortable 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 start with.

Installation

You can install Vue Material through NPM or Yarn:

NPM or Yarn
$ npm install vue-material@beta --save
$ yarn add vue-material@beta
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'

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'

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@beta/dist/vue-material.min.css">
    <link rel="stylesheet" href="https://unpkg.com/vue-material@beta/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@beta"></script>
    <script>
      Vue.use(VueMaterial.default)

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