npm i @meforma/vue-toaster

<button class="btn btn-success " type="button" @click="success" variant="success" >Success</button>

export default {
methods:{
 success() {
       this.$toast.show(' New order has been placed ', { theme: 'outline',position: 'top-right', type: 'success', duration: 2000 });
            },
}
}

npm i vue3-tour

import Vue3Tour from 'vue3-tour'
import 'vue3-tour/dist/vue3-tour.css'
.use(Vue3Tour)

<img src="../../../assets/images/banner/3.jpg" alt="girl" width="800" height="600" >
<a class="icon-wrapper" id="update-profile-tour" href="edit-profile.html" >
<i class="icofont icofont-pencil-alt-5" ></i>
</a>
<v-tour class="scrollbar-margins large-margin scroll-demo p-0" v-once :settings="settings"></v-tour>

export default {
data() {
  return{
    tourOptions: {
      useKeyboardNavigation: true,
      labels: {
        buttonSkip: "Skip",
        buttonPrevious: "Back",
        buttonNext: "Next",
        buttonStop: "Done",
      },
    },
    steps: [
    {
      target: "#update-profile-tour",
      content: "Change Profile image here",
    },
  ],
}
}
mounted: function () {
  this.$tours["myTour"].start();
 },
}

npm install vue-star-rating@next

<star-rating :show-rating="false" :star-size="20" :max-rating="10" @update:rating="rating1 = $event" ></star-rating>
<pre class="mb-0 rating-pre" >Rating {{rating}}</pre>

import StarRating from 'vue-star-rating';

 export default {
  components:{
    StarRating,
 },
 data(){
   return{
     rating: "0",
     rating1:"0",
     rating2:"0",
      disabled: false
   }
 },
 methods:{
   currentRatingText() {
   return this.rating 
 },
}

<nav aria-label="Page navigation example" >
<ul class="pagination pagination-primary" > 
<li class="page-item"><a class="page-link" href="javascript:void(0)" >Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)" >1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)" >2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)" >3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)" >Next</a></li>
</ul>                           
</nav>

                                      

npm i vue-slider-component

<VueSlider v-model="one.value" :data="one.data" :marks="true" :tooltip="'always'" :tooltip-placement="'top'" ></VueSlider>

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  components:{
    VueSlider
  },
  data() {
  return{
    one:{
      value:10,
      data:[10,100]
    },
   }
 }
}

npm i vue-cropperjs

<vue-cropper 
ref="cropper"
:guides="true"
:view-mode="viewmodeselected"
drag-mode="crop"
:aspectRatio="aspectRatioselected"
:auto-crop-area="0.5"
:min-container-width="250"
:min-container-height="180"
:background="true"
:rotatable="true"
:movable="true"
:src="getImgUrl()"
alt="Source Image"
:ready="ready"
:crop="cropImage"
:img-style="{ width: '800px', height: '500px' }">
</vue-cropper>

import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css'; 

  export default {
      components: {
        VueCropper,
      },
     data(){
        return{
          myimgSrc:'img-cropper.jpg',
          imgSrc:'',
          imageData:'',
          containerData:'',
          putData:'',
          viewmodeselected:0,
          cropImg: '',
          viewmodeOptions: [
            { text: 'VM0', value: 0 },
            { text: 'VM1', value: 1 },
            { text: 'VM2', value: 2 },
            { text: 'VM3', value: 3 },
          ],
          aspectRatioselected:1.7777777777777777,
          aspectRatioOptions: [
            { text: '16:9', value: 1.7777777777777777 },
            { text: '4:3', value: 1.3333333333333333 },
            { text: '1:1', value: 1 },
            { text: '2:3', value: 0.6666666666666666 },
            { text: 'Free', value: NaN }
          ]
        };
      },
    }

npm i vue-draggable-next

<draggable class="pull-left">
<div v-for="text in one" :key="text">{{text}}</div>
</draggable>

import { VueDraggableNext } from 'vue-draggable-next'
export default {
      components:{
       draggable: VueDraggableNext,
      },
      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.'
          ],
          }
      }  
   }

npm i dropzone-vue

<DropZone 
:maxFileSize="Number(60000000)"
url="http://localhost:8080"
:uploadOnDrop="true"
:dropzoneMessageClassName="customClass">
</DropZone>                                 
     

npm i vue3-simple-typeahead

<vue3-simple-typeahead :items="list" class="form-control typeahead form-control" :placeholder="options.placeholder" @selectItem="selectItem" @onInput="onInput" @onBlur="onBlur" :minInputLength="options.minInputLength" />

export default {
created() {
  this.listFiltered = this.list;
},
data() {
  return {
    options: {
      placeholder: 'States of USA',
      minInputLength: 1,
    },
    list: [
       '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', 
Inside Your template tags add
        'south carolina',
        'south dakota',
        'tennessee',
        'texas',
        'utah',
        'vermont',
        'virginia',
        'washington',
        'west virginia',
        'wisconsin',
        'wyoming'
    ],
    listFiltered: [],
  };
},
methods: {
  selectItem(item) {
    this.data.selection = item;
  },
  onInput(event) {
    this.data.selection = null;
    this.data.input = event.input;
    this.listFiltered = event.items;
  },
  onBlur(event) {
    this.data.input = event.input;
    this.listFiltered = event.items;
  },
 },
}

npm i vue-google-charts

<GChart
class="chart-overflow" 
id="line-chart"
type="LineChart"
:data="line_chart.chartData_1"
:options="line_chart.options_1" />

 var primary = localStorage.getItem('primary_color') || '#24695c';
  var secondary = localStorage.getItem('secondary_color') || '#ba895d';
  import { GChart } from "vue-google-charts";
 
  export default {
      components:{
          GChart 
      },
      data(){
          return{
                chartsLib: null, 
                line_chart: {
            chartData_1: [  
              ['Month', 'Guardians of the Galaxy', 'The Avengers','Transformers: Age of Extinction'],
              [1,  37.8, 80.8, 41.8],
              [2,  30.9, 10.5, 32.4],
              [3,  40.4,   57, 25.7],
              [4,  11.7, 18.8, 10.5],
              [5,   20, 17.6, 10.4],
              [6,   8.8, 13.6,  7.7],
              [7,   7.6, 12.3,  9.6],
              [8,  12.3, 29.2, 10.6],
              [9,  16.9, 42.9, 14.8],
              [10, 12.8, 30.9, 11.6],
              [11,  5.3,  7.9,  4.7],
              [12,  6.6,  8.4,  5.2],
            ],
            options_1:  {
              chart: {
                title: 'Box Office Earnings in First Two Weeks of Opening',
                subtitle: 'in millions of dollars (USD)'
              },
              colors: [primary, secondary, '#222222'],
              height: 400,
              width:'100%',
            }
          },
          }
      },
    }                              

npm i vue-chartist

<chartist
class="ct-6 flot-chart-container"
ratio="ct-major-second"
type="Line"
:data="chart1.data"
:options="chart1.options"
:event-handlers="chart1.eventHandlers">
<chartist> 

 var seq = 0;
  var delays = 80;
  var durations = 500;
  
  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,
          },
          eventHandlers : [{
            event: 'draw',
            fn(data) {
              seq++;
              if(data.type === 'line') {
                data.element.animate({
                  opacity: {
                    begin: seq * delays + 1000,
                    dur: durations,
                    from: 0,
                    to: 1
                  }
                });
              } else if(data.type === 'label' && data.axis === 'x') {
                data.element.animate({
                  y: {
                    begin: seq * delays,
                    dur: durations,
                    from: data.y + 100,
                    to: data.y,
                    easing: 'easeOutQuart'
                  }
                });
              } else if(data.type === 'label' && data.axis === 'y') {
                data.element.animate({
                  x: {
                    begin: seq * delays,
                    dur: durations,
                    from: data.x - 100,
                    to: data.x,
                    easing: 'easeOutQuart'
                  }
                });
              } else if(data.type === 'point') {
                data.element.animate({
                  x1: {
                    begin: seq * delays,
                    dur: durations,
                    from: data.x - 10,
                    to: data.x,
                    easing: 'easeOutQuart'
                  },
                  x2: {
                    begin: seq * delays,
                    dur: durations,
                    from: data.x - 10,
                    to: data.x,
                    easing: 'easeOutQuart'
                  },
                  opacity: {
                    begin: seq * delays,
                    dur: durations,
                    from: 0,
                    to: 1,
                    easing: 'easeOutQuart'
                  }
                });
              } else if(data.type === 'grid') {
                var pos1Animation = {
                  begin: seq * delays,
                  dur: durations,
                  from: data[data.axis.units.pos + '1'] - 30,
                  to: data[data.axis.units.pos + '1'],
                  easing: 'easeOutQuart'
                };
                var pos2Animation = {
                  begin: seq * delays,
                  dur: durations,
                  from: data[data.axis.units.pos + '2'] - 100,
                  to: data[data.axis.units.pos + '2'],
                  easing: 'easeOutQuart'
                };
                var animations = {};
                animations[data.axis.units.pos + '1'] = pos1Animation;
                animations[data.axis.units.pos + '2'] = pos2Animation;
                animations['opacity'] = {
                  begin: seq * delays,
                  dur: durations,
                  from: 0,
                  to: 1,
                  easing: 'easeOutQuart'
                };
                data.element.animate(animations);
              }
            }
          }]
        },
      }
    }
   }                                   

npm i @vue-leaflet/vue-leaflet

<l-map :zoom="simple.zoom" :center="simple.center" style="height: 500px">
<l-tile-layer :url="simple.url"><l-tile-layer>
<l-map>

import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
export default {
    components:{
         LMap,
          LTileLayer
    },
    data(){
        return{
            simple:{
          zoom:5,
          center: [49.439557, 234.558105],
          url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        },
        }
    }
  }