salma sultana
Former End User Consultant, Current Software Developer, and a Master's degree holder in Data Science and Engineering.
Building an application using Vue Material
This article assumes prior knowledge of Vue JS 2.0 and Vue Material
Let’s build a simple application using Vue Material. You would first need to install Vue Command Line Interface from terminal.
Installation
Install vue-cli using the command: sudo npm install -g vue-cli
Then, you need to download the webpack-based Vue.js project template by running the following command:
vue init webpack todo-list
Once the project template is downloaded, you would be required to enter your project details as shown below:
? Project name: todo
? Project description: a simple todo list using vue material
? Author: Salma Sultana <salsultana04@gmail.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (recommended) npm
Now, change into the directory of your newly created project using:
cd todo-list
And complete the project setup by installing the dependencies via:
npm install
npm run dev
Add vue-material library to the project by running the command:
npm install vue-material –save
Open index.html file and include the following link elements into the <head> </head> section:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <br>
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
Open src/main.js file and include the below ‘import’ statements to make vue-material available in the project
import VueMaterial from "vue-material"
import "vue-material/dist/vue-material.css"
Finally, activate VueMaterial by executing the Vue.use() method in the same file.
Vue.use(VueMaterial)