How to use Material Design with Vue

Use vue-cli to create a new app

$ vue create my-app

Let's use babel and eslint for our presets:

Vue CLI v4.2.3
┌─────────────────────────────────────────────┐
│                                             │
│     New version available 4.2.3 → 4.3.1     │
│   Run yarn global add @vue/cli to update!   │
│                                             │
└─────────────────────────────────────────────┘

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

It may take a few minutes for the installation to finish.

Install vue-material

Enter the folder then run npm install vue-material --save or if you're a yarn fanatic yarn add vue-material. When the installation finishes, we need to add them to main.js.

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

Vue.use(VueMaterial)

• import VueMaterial from 'vue-material' - globally imports all the components. If you'd rather import per component, use import { MdCard } from 'vue-material/dist/components' (replace MdCard with the actual component you need)
• import 'vue-material/dist/vue-material.min.css' - imports the minified base styles
• import 'vue-material/dist/theme/default.css' - imports the default theme. Alternatives: default-dark.css, black-green-dark.css, black-green-light.css

Use Material Icons

Under head of index.html, simply add <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">.

Optional: Use Roboto

The official vue-material docs highly recommend using Roboto with your app. To use it, add <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> under head of index.html. The vue app created by vue-cli creates an App.vue component by default. Add Roboto as the first font-family option.

<style>
#app {
  font-family: Roboto, Avenir, Helvetica, Arial, sans-serif;
  /* other styles */
}
</style>

References:
Vue Material

Comments

[Thomas Bnt]

Oh great ! But I would like to use Fork Awesome for more icons, vue-material can understand fa or I will check manually on a main.css file ?

[Rei Allen Ramos]

This is first time I heard of Fork Awesome. Will take a look but Im pretty sure it must integrated smoothly with Vue 👌

[Thomas Bnt]

This is awesome ! More icons with decentralized theme. It's just cool!