npm install vue-toasted --save 

<template>
<div>
      <b-button @click="success" variant="success">Success</b-button>
</div>
</template>
<script>
export default {
  methods:{
      success()
      {
         this.$toasted.show(" New order has been placed ", {theme: 'outline',position: "top-right", type: 'success', duration: 2000});
      }
  }
}
</script>

npm i vue-tour

<template>
<div>
      <v-tour name="myTour" :steps="steps" :options="tourOptions"></v-tour>
</div>
</template>
<script>
export default {
         data () {
            return {
                tourOptions: {
                    useKeyboardNavigation: true,
                    labels: {
                      buttonSkip: 'Skip',
                      buttonPrevious: 'Back',
                      buttonNext: 'Next',
                      buttonStop: 'Done'
                  }
                },
                steps: [
                  {
                      target: '#profile-tour',
                      content: 'This is Profile image'
                  },
                  {
                      target: '#update-profile-tour',
                      content: 'Change Profile image here'
                  }
                ]
            }
        },
        mounted: function () {
            this.$tours['myTour'].start()
        }
}
</script>

npm i vue-rate-it

<template>
<div>
      <image-rating :src="rectanglerating()" :item-size="12" :max-rating="10"></image-rating>
</div>
</template>
<script>
import {ImageRating} from 'vue-rate-it';
 
export default {
    components: {
        ImageRating
    },
     methods:{
      vuelogo(){
          var vuelogo = require('../../assets/images/vuelogo.png');
        return vuelogo;
      }
     }
}
</script>

<template>
<div>
    <b-pagination-nav
        :number-of-pages="3"
        base-url="#"
        first-text="First"
        prev-text="Prev"
        next-text="Next"
        last-text="Last"
        >
</b-pagination-nav>
</div>
</template>
<script>
 export default { }
</script>

npm i vue-sweetalert2

<template>
<div>
      <b-button type="button" v-on:click="basic" variant="primary">Basic</b-button>
</div>
</template>
<script>
export default {
    methods:{
    basic:function(){
        this.$swal({
            title:'Hello world!'
        });
      }
    }
 }
</script>

npm i vue-cropperjs

<template>
<div>
   <vue-cropper ref='cropper'  :crop="cropImage"> </vue-cropper>
</div>
</template>
<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
 
export default {
    data () {
return {
one:{
value:5,
range:[
{
label: '10'
},
{
label: '100'
},
]
}
        }
    }
 },
components: {
        VueCropper,
},
mounted(){
    this.imageData = this.$refs.cropper.getData();
},
</script>

npm i vue2-dragula

<template>
<div>
    <div class="pull-left " v-dragula="colOne" service="my-third" drake="a">
          <div v-for="text in colOne" :key="text">{{text}}</div>
  </div>
    <div class="pull-right" v-dragula="colTwo" service="my-third" drake="a">
          <div v-for="text in colTwo" :key="text">{{text}}</div>
  </div>
</div>
</template>
<script>
import { Vue2Dragula } from 'vue2-dragula'
export default {
    data () {
return {
     one: [
                'Lorem ipsum dolor sit amet, consectetur',
                'sed do eiusmod tempor incididunt ut labore et dolore magna.',
                'Ut enim ad minim veniam, quis nostrud exercitation',
                'ullamco laboris nisi ut aliquip ex ea commodo consequat.'
            ],
            two: [
                'Duis aute irure dolor in reprehenderit in voluptate velit esse',
                'cillum dolore eu fugiat nulla pariatur.',
                'Excepteur sint occaecat cupidatat non proident,',
                'sunt in culpa qui officia deserunt mollit anim id est laborum.'
            ],
        }
    }
 },
components: {
        Vue2Dragula
},
mounted(){
    this.imageData = this.$refs.cropper.getData();
},
</script>

npm i vue2-dropzone

<template>
<div>
       <vue-dropzone id="singledropzone" :options="singledropzoneOptions" class="dropzone digits">                                
    </vue-dropzone>
</div>
</template>
<script>
import vue2Dropzone from 'vue2-dropzone'
export default {
    data () {
return {
  singledropzoneOptions:{
                  url:"http://localhost:8080",
                  thumbnailWidth: 150,
                maxFiles:1,
                maxFilesize: 2,
                  addRemoveLinks: true,
                  dictDefaultMessage:"<i class='icon-cloud-up'></i><h6>Drop files here or click to upload.</h6><span>(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>"
           },
        }
    }
 },
components: {
    vueDropzone: vue2Dropzone
}
</script>

npm i vue-multiselect

<template>
<div>
    <multiselect v-model="singleValue" :options="options" label="name" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect></div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
data(){
  return{
        singleValue:""
    }
},
components: {
    Multiselect
}
</script>

npm i vue-bootstrap-typeahead

<template>
<div>
 <vue-bootstrap-typeahead
                          v-model="query"
                          inputClass="typeahead"
                          :data="countries"
                          placeholder="State of USA"
                        />
</template>
<script>
import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
export default {
data(){
  return{
          query: "",
           countries: [
              "alabama", "alaska", "arizona", "arkansas", "california", "colorado", "connecticut", "delaware", "florida", "georgia", "hawaii", "idaho", "illinois", "indiana", "iowa", "kansas", "kentucky", "louisiana", "maine", "maryland", "massachusetts", "michigan", "minnesota", "mississippi", "missouri", "montana", "nebraska", "nevada", "new hampshire", "new jersey", "new mexico", "new york", "north carolina", "north dakota", "ohio", "oklahoma", "oregon", "pennsylvania", "rhode island", "south carolina", "south dakota", "tennessee", "texas", "utah", "vermont", "virginia", "washington", "west virginia", "wisconsin", "wyoming"
      ]
    }
},
components: {
    VueBootstrapTypeahead
}
</script>

npm i vuejs-smart-table

<template>
<div>
    Put your smart table code here
</template>
<script>
import SmartTable from 'vuejs-smart-table'
data(){
  return{
    }
},
components: {
    SmartTable
}
</script>

npm i vue-chartjs

<template>
<div>
    <Bar class="chart-height"/>
</template>
<script>
    import { Bar } from 'vue-chartjs'
export default {
  data(){
    return{
      }
  },
  components: {
      Bar
  },
 mounted () {
    this.renderChart({
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
}
</script>

npm i vue-chartist

<template>
<div>
    <chartist
      class="ct-6 flot-chart-container"
      ratio="ct-major-second"
      type="Line"
      :data="chart1.data"
      :options="chart1.options">
    </chartist>
</template>
<script>
import * as Chartist from 'chartist';
export default {
data(){
  return{
     chart1 : {
        data: {
            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          series: [
               [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
               [4,  5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
               [5,  3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
               [3,  4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
          ]
        },
        options: {
            low: 0,
            showArea: false,
            fullWidth: true,
        }
      },
}
},
components: {
    Chartist
}
}
</script>

npm i vue2-leaflet

<template>
<div>
      <l-map :zoom="simple.zoom" :center="simple.center" style="height: 500px">
                              <l-tile-layer :url="simple.url"></l-tile-layer>
                          </l-map>
</template>
<script>
import { LMap } from 'vue2-leaflet'
export default {
  data(){
    return{
         simple:{
                zoom:5,
                  center: [49.439557, 234.558105],
                  url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            }
      }
  },
  components: {
      LMap
  }
}
</script>

npm i @ckeditor/ckeditor5-vue

<template>
<div>
     <ckeditor :editor="editor"  v-model="editorData"></ckeditor>
</div>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
export default {
  data(){
    return{
        editor: ClassicEditor,
          editorData: '<p>Lorem Ipsum is simply dummy text</p>',
      }
  },
  components: {
        ckeditor: CKEditor.component
  }
}
</script>