How to use Material Design with Vue
Rei Allen Ramos
Posted on April 24, 2020
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, useimport { MdCard } from 'vue-material/dist/components'
(replaceMdCard
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
Posted on April 24, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.