Dashboard and reporting
Now that our first page is done, we can continue with the real-time dashboard.
Progress bars library
To display some pretty indicators, let's install another Vue library that allows drawing progress bars along SVG paths; that way, we can have semi-circular bars:
- Add the
vue-progress-path
npm package to the project:
meteor npm i -S vue-progress-path
We need to tell the Vue compiler for Meteor not to process the files in node_modules
where the package is installed.
- Create a new
.vueignore
file in the project root directory. This file works like a.gitignore
: each line is a rule to ignore some paths. If it ends with a slash/
, it will ignore only corresponding folders. So, the content of.vueignore
should be as follows:
node_modules/
- Finally, install the
vue-progress-path
plugin in theclient/main.js
file:
import 'vue-progress-path/dist/vue-progress-path.css' import VueProgress from 'vue-progress-path' Vue.use(VueProgress, { defaultShape: 'semicircle...