npm i @meforma/vue-toaster

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

 import { createToaster } from "@meforma/vue-toaster";
 const toaster = createToaster({})
 function success() {
     toaster.show(' New order has been placed ', { theme: 'outline', position: 'top-right', type: 'success', duration: 2000 });
 }

npm i @globalhive/vuejs-tour

import { defineNuxtPlugin } from '#app'
import VueJsTour from '@globalhive/vuejs-tour';
import '@globalhive/vuejs-tour/dist/style.css';
export default defineNuxtPlugin(nuxtApp => {
    if (process.server) {

    }else if (process.client) {
        nuxtApp.vueApp.use(VueJsTour)
    }

})

<class="img-fluid" id="profile-tour" alt=""
:src="getImages('user/7.jpg')" data-intro="This is Profile image">
<router-link class="icon-wrapper" id="update-profile-tour" to="/users/edit">
<i class="icofont icofont-pencil-alt-5" data-intro="Change Profile image here"  id="update-profile-tour" ></i>
</router-link>
<VTour ref="tour" :steps="steps" autoStart/>

 import { ref, onMounted } from "vue"
 const tour = ref()
 const steps = ref([
     {
         target: "#profile-tour",
         content: "This is Profile image",
     },
     {
         target: "#update-profile-tour",
         content: "Change Profile image here",
     },
 ])
 onMounted(() => {
     tour.value.resetTour();
 })

export function getImgUrl(path: string) {
return '/images/' + path
}

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" :tooltip="'always'" :tooltip-placement="'top'" ></VueSlider>

 import { ref } from "vue"
 const one = ref({
     value: 10,
     data: [10, 100]
 })

npm i vue-cropperjs

<vue-cropper 
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(myimgSrc)" 
alt="Source Image" 
:ready="ready" 
:crop="cropImage"
img-preview=".img-preview" 
:img-style="{ width: '800px', height: '500px' }">
</vue-cropper>

import { getImgUrl } from "@/composables/commen/imgMixin"
import { ref, onMounted } from "vue"
const myimgSrc = ref<string>('other-images/img-cropper.jpg')
const imageData = ref<any>({})
const containerData = ref<string>('')
const putData = ref<string>('')
const viewmodeselected = ref<number>(0)
const cropImg = ref<string>('')
const aspectRatioselected = ref<number>(1.7777777777777777)
const cropper = ref()
const convertNumber = (num?: number) => num != null ? Math.round(num) : undefined
function ready() {
    containerData.value = cropper.value.getContainerData();
}
function cropImage() {
    imageData.value = cropper.value.getData();
    cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
}
onMounted(() => {
    imageData.value = cropper.value.getData();
})

npm i dropzone-vue

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

npm i vue3-simple-typeahead

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

import { options, list, onInput, onBlur } from "@/composables/commen/typeaheadview"

import { ref, onMounted } from "vue";
onMounted(() => {
    listFiltered.value = list.value;
})
interface data {
    placeholder: string,
    minInputLength: number,
    hint: boolean
}
export const options = ref({
    placeholder: 'States of USA',
    minInputLength: 1,
    hint: false
})
export const listFiltered = ref([])
export const list = ref(['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',
])


export function selectItem(item: any) {
}
export function onInput(event: any) {
    listFiltered.value = event.items;
}
export function onBlur(event: any) {
    listFiltered.value = 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" />

 import { GChart } from "vue-google-charts";
let primary = ref('#24695c')
 let secondary = ref("#ba895d");
 primary.value = useCookie('primary_color').value ? useCookie('primary_color').value : '#24695c'
secondary.value = useCookie('secondary_color').value ? useCookie('secondary_color').value : '#ba895d'
 const 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.value, secondary.value, "#51bb25"],
         height: 500,
         width: '100%',
 
     },
 }
 

npm i @vue-leaflet/vue-leaflet

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

import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
const simple =ref( {
    zoom: 5,
    center: [49.439557, 234.558105],
    url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
})