In the following sections you will learn how to use the components directly with a CDN (Content Delivery Network) or to bundle them with a bundler e.g. webpack to build more complex projects.

Each approach depends on what you are targeting. When you just want to test the component in your existing library I recommend you to use the CDN way. When you want to integrate the component into a vue cli project then it would be the best to be familiar with a bundler of your choice and taking the compiling way.

CDN Usage

Integrating a component e.g. Button is quite easy:

    <div id="app">
    <script src=""></script>
    <script src=""></script>
    <script src="">
      const app = new Vue({
        el: '#app'

Bundler Usage

I assume that you have a working bundler setup e.g. generated by the vue-cli thats capable of loading SASS stylesheets and Vue.js SFC (Single File Components).


npm install --save v-md-date-range-picker

# or with yarn
yarn add v-md-date-range-picker

Global Usage

import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";