Top

Component

Installing Bootstrap

We have use bootstrap to design most of the components, make sure you install it and integrate with the project.

step 1:

npm install --save bootstrap

step 2:

In your plugins/main.ts file all the following code:

import 'bootstrap/dist/css/bootstrap.css'
import "bootstrap"
import "bootstrap/dist/js/bootstrap.min.js";
Basic UI Elements

Inside Your template tags add

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-light">Light Button</button>

To use another types button you have to link the related css file according to types of buttons in a head tag

PrimarySecondarySuccessInfoWarningDangerLightDark

Inside Your template tags add

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning text-dark">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark tag-pills-sm-mb">Dark</span>

Inside Your template tags add

<div class="progress ">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress ">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress ">
  <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress ">
  <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress ">
  <div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>

Inside Your template tags add

<div class="alert alert-primary" role="alert">This is a primary alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-light" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a light alert—check it out!</div>
Dismissible popover

Inside Your template tags add

<button class="btn btn-primary example-popover" type="button" ref="tolek" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 <a class="example-popover btn btn-primary" tabindex="0" role="button" ref="tole" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
 <button class="example-popover btn btn-primary" type="button" ref="to" data-bs-trigger="hover" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover title" data-offset="-20px -20px" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." >On Hover Tooltip</button>

Inside Your script tags add

import { Popover } from "bootstrap";
 import { ref, onMounted } from "vue";
 const to = ref(null);
 const tole = ref(null);
 const infoTooltip = Popover
 const list = Popover
 onMounted(() => {
     new Popover(document.body, {
         selector: "[data-bs-toggle='popover']",
     })
     infoTooltip.value = new Popover(to.value!);
     list.value = new Popover(tole.value!);
 })

Inside Your template tags add

<button class="example-popover btn btn-primary" type="button" data-container="body"
 data-bs-toggle="tooltip" data-bs-placement="top" title="Popover title" ref="hover">Hover Me</button>

Inside Your script tags add

import { Tooltip } from "bootstrap";
 import { ref, onMounted } from "vue";
 const hover = ref(null)
 const tooltiplist = Tooltip
 onMounted(() => {
     tooltiplist.value = new Tooltip(hover.value!)
 })

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Inside Your template tags add

 <ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle bg-transparent border-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"  @click="open()">Dropdown</a>
  <div class="dropdown-menu" :class="filter ? 'show' : ''"><a class="dropdown-item" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Separated link</a></div>
</li>
<li class="nav-item"><a class="nav-link" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li>
<li class="nav-item"><a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <p class="mb-0 m-t-30">{{desc}}</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  <p class="mb-0 m-t-30">{{desc}}</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
  <p class="mb-0 m-t-30">{{desc}}</p>
</div>
</div>

Inside Your script tags add

import { ref } from 'vue';
 const filter = ref(false)
 const desc = ref <string >("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum")
 function open() {
     filter.value = !filter.value
 }
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Inside Your template tags add

 <div class="default-according" id="accordion">
<div class="card">
  <div class="card-header" id="headingOne">
    <h5 class="mb-0">
      <button class="btn btn-link ps-0" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #<span>1</span></button>
    </h5>
  </div>
  <div class="collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordion">
    <div class="card-body">{{desc}}</div>
  </div>
</div>
<div class="card">
  <div class="card-header" id="headingTwo">
    <h5 class="mb-0">
      <button class="btn btn-link ps-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #<span>2</span></button>
    </h5>
  </div>
  <div class="collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordion">
    <div class="card-body">{{desc}}</div>
  </div>
</div>
<div class="card">
  <div class="card-header" id="headingThree">
    <h5 class="mb-0">
      <button class="btn btn-link ps-0 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #<span>3</span></button>
    </h5>
  </div>
  <div class="collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#accordion">
    <div class="card-body">{{desc}}</div>
  </div>
</div>
</div>

Inside Your script tags add

import { ref } from 'vue';
const desc = ref<string>("Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.")
Advance UI Elements

Installing and usage

npm i vue3-perfect-scrollbar

In your plugins/main.ts file all the following code:

import PerfectScrollbar from 'vue3-perfect-scrollbar'
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'
.use(PerfectScrollbar)

Inside Your template tags add

<perfect-scrollbar class="scrollbar-margins large-margin scroll-demo p-0"   v-once :settings="settings3">
<img :src="getImgUrl('banner/1.jpg')" alt="girl" width="800" height="600" >
</perfect-scrollbar>

Inside Your script tags add

import { getImgUrl } from "@/composables/commen/imgMixin"
import { ref } from "vue"
const settings3 = ref({
    maxScrollbarLength: 60
})

In your composables imgMixin.ts file all the following code:

export function getImgUrl(path: string) {
 return require('@/assets/images/' + path);
}
Supplemental

Installing and usage

npm i vue3-tree

Inside Your template tags add

<Tree :nodes="menu" :use-icon="true" />

Inside Your script tags add

import Tree from "vue3-tree";
import "vue3-tree/dist/style.css";
import { menu } from "@/composables/commen/treeView"

In your composables treeView.ts file all the following code:

import { ref } from "vue"

 export const menu = ref([
     {
         id: 1,
         label: "Admin",
         nodes: [
             {
                 id: 2,
                 label: "Assets",
                 nodes: [
                     {
                         id: 3,
                         label: "CSS",
                         nodes: [
                             {
                                 id: 4,
                                 label: "Css One",
                             },
                             {
                                 id: 5,
                                 label: "Css Two",
                             },
                         ],
                     },
                     {
                         id: 6,
                         label: "Js",
                         nodes: [
                             {
                                 id: 7,
                                 label: "Js One",
                             },
                             {
                                 id: 8,
                                 label: "Js Two",
                             },
                         ],
                     },
                     {
                         id: 9,
                         label: "Scss",
                         nodes: [
                             {
                                 id: 10,
                                 label: "Sub Child",
                                 nodes: [
                                     {
                                         id: 11,
                                         label: "Sub File",
                                     },
                                     {
                                         id: 12,
                                         label: "Sub File",
                                     },
                                 ],
                             },
                             {
                                 id: 13,
                                 label: "Scss Two",
                             },
                         ],
                     },
                 ],
             },
             {
                 id: 14,
                 label: "Default",
                 nodes: [
                     {
                         id: 15,
                         label: "Dashboard",
                     },
                     {
                         id: 16,
                         label: "Typography",
                     },
                 ],
             },
         ],
     },
     {
         id: 17,
         label: "index file",
     },
 ])
Supplemental

Installing and usage

npm i @kyvg/vue3-notification

Inside Your template tags add

<div class="row">
<label class="col-xl-2 col-sm-12 col-md-12 col-form-label">Placement</label>
<div class="col-xl-4 col-sm-12 col-md-6 mb-4">
   <select v-model="enternotify" @change="selectnotify" class="form-select form-control" id="bootstrap-notify-placement-from">
  <option v-for="(anim, index) in notifyList" :value="anim.position" :key="index">{{ anim.position }}</option >  
  </select >
</div >

</div >
        
<div class="row">
 <label class="col-xl-2 col-sm-12 col-md-12 col-form-label">Icon</label>
 <div class="col-xl-4 col-md-12 col-sm-12 mb-4">
   <select v-model="entericon" @change="selectnotify" class="form-select form-control" id="bootstrap-notify-placement-from">
   <option v-for="(anim, index) in notifyList" :value="anim.icon" :key="index">{{ anim.icon }}</option>  
   </select>
 </div>
 </div>
        
<notifications  :position="enternotify" :key="index" >
<template #body="props"  >
 <div class="vue-notification"> <i :class="entericon"></i>
 <p class="title">
   {{ props.item.title }}
 </p>
</div>
</template>
</notifications>
<button class="btn btn-primary" id="bootstrap-notify-gen-btn" @click.prevent="showNotify"> show notify</button>

Inside Your script tags add

import { ref } from "vue"
 import { notify } from "@kyvg/vue3-notification";
 const enternotify = ref<string>("top left")
 const entericon = ref<string>("none")
 interface notifys {
     position: string, icon: string
 }
 const notifyList = ref<notifys[]>([
     { icon: "none", position: "" },
     { position: "top left", icon: "fa fa-check-square" },
     { position: "top right", icon: "fa fa-warning" },
     { position: "bottom left", icon: "fa fa-cloud-download" },
     { position: "bottom right", icon: "fa fa-unlock-alt" },
 ])
 function showNotify() {
 
     notify({
         title: "New Order has been placed",
 
     });
 }
Supplemental

Installing and usage

npm i vue-star-rating
npm install vue-rate@next

In your plugins/main.ts file all the following code:

import rate from 'vue-rate'
import 'vue-rate/dist/vue-rate.css'
.use(rate)

Inside Your template tags add

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

<rate :length="5" :value="2"  :ratedesc="['Very bad', 'bad', 'Normal', 'Good', 'Very good']" />

Inside Your script tags add

import StarRating from 'vue-star-rating';
import { ref } from "vue"
const rating = ref<string>("0")
Supplemental

Installing and usage

npm i dropzone-vue

Inside Your template tags add

<DropZone
:maxFileSize="Number(60000000)"
:uploadOnDrop="true"
:dropzoneMessageClassName="customClass" :maxFiles="1">
</DropZone>

Inside Your script tags add

import DropZone from "dropzone-vue";

Inside Your style tags add

@import 'dropzone-vue/dist/dropzone-vue.common.css';
Supplemental

Installing and usage

npm i @globalhive/vuejs-tour

In your plugins/main.ts file all the following code:

import VueJsTour from '@globalhive/vuejs-tour';
import '@globalhive/vuejs-tour/dist/style.css';
.use(VueJsTour)

Inside Your template tags add

<img img class="img-fluid" alt="" src="@/assets/images/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/>

Inside Your script tags add

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();
})
Supplemental

Installing and usage

npm i sweetalert2

Inside Your template tags add

<button class="btn btn-danger sweet-5" type="button" v-on:click="basic_warning_alert" >Warning alert</button>

Inside Your script tags add

import Swal from 'sweetalert2'
function basic_warning_alert() {
    Swal.fire({
        icon: 'warning',
        title: "Are you sure?",
        text: 'Once deleted, you will not be able to recover this imaginary file!',
        showCancelButton: true,
        confirmButtonText: 'Ok',
        confirmButtonColor: '#3e5fce',
        cancelButtonText: 'Cancel',
        cancelButtonColor: '#efefef',
    }).then((result) => {
        if (result.value) {
            Swal.fire({
                icon: 'success',
                text: 'Poof! Your imaginary file has been deleted!',
                confirmButtonColor: '#3e5fce',
            });
        } else {
            Swal.fire({
                text: 'Your imaginary file is safe!',
                confirmButtonColor: '#3e5fce',
            });
        }
    });
}
Supplemental

Inside Your template tags add

<div class="mb-2 me-2 mb-0 animated-modal-md-mb w-auto">
    <label class="me-3">Entrances</label>
    <select class="form-select" id="entrance" v-model="enterAnimation" >
      <option v-for="(anim, index) in animationList" :value="anim" :key="index">{{ anim }}</option>
    </select>
  </div>

<div class="mb-2 me-2 mb-0 animated-modal-md-mb w-auto">
  <label class="me-3">Exits</label>
   <select class="form-select" id="exit" v-model="exitAnimation">
    <option v-for="(anim, index) in animationList" :value="anim" :key="index">{{anim}}</option>
    </select>
  </div>

<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#myModal" @click.prevent="isActive(this.enterAnimation)">Launch demo modal</button>
<Teleport to="body">
    <div class="modal fade" @click="close" id="myModal" role="dialog" :style="{ marginRight: animate == rubberBand ? '15px' : '0px' }">
      <div id="mod" class="modal-dialog" role="document">
       <div>
       <button class="btn-close theme-close" type="button" @click="close"></button>
       <div class="modal-body">
      <div class="card">
     <div class="animate-widget">
    <div><img class="img-fluid" :src="getImgUrl('banner/3.jpg')" alt=""></div>
     <div class="text-center p-25">
       <p class="text-muted mb-0">asdasdsadsad pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings</p>
       </div>
    </div>
    </div>
</div>
</div>
</div>
</div>
</Teleport>

Inside Your script tags add

import { getImgUrl } from "@/composables/commen/imgMixin"
 import { animationList, animation, animate, enterAnimation, exitAnimation } from "@/composables/commen/animationView"
 
 function isActive(path: boolean) {
     animate.value = path
     document.getElementById("mod").className = `modal-dialog ${path} animated`
 }
 function close() {
 
     document.getElementById("mod").className = `modal-dialog ${exitAnimation.value} animated`
 }

In your composables animationView.ts file all the following code:

import { ref } from "vue"
 export const enterAnimation = ref<string>('bounceIn')
 export const exitAnimation = ref<string>('flipOutX')
 export const animation = ref<string>('bounce')
 export const show = ref<boolean>(true)
 export const animate = ref<boolean>(false)
 export const active = ref<boolean>(false)
 export const animationList = [
     "bounce",
     "flash",
     "flip",
     "headShake",
     "hinge",
     "jello",
     "pulse",
     "rubberBand",
     "shake",
     "swing",
     "tada",
     "wobble",
     "bounceIn",
     "bounceInDown",
     "bounceInLeft",
     "bounceInRight",
     "bounceInUp",
     "fadeIn",
     "fadeInDown",
     "fadeInDownBig",
     "fadeInLeft",
     "fadeInLeftBig",
     "fadeInRight",
     "fadeInRightBig",
     "fadeInUp",
     "fadeInUpBig",
     "flipInX",
     "flipInY",
     "lightSpeedIn",
     "rollIn",
     "rotateIn",
     "rotateInDownLeft",
     "rotateInDownRight",
     "rotateInUpLeft",
     "rotateInUpRight",
     "slideInDown",
     "slideInLeft",
     "slideInRight",
     "slideInUp",
     "zoomIn",
     "zoomInDown",
     "zoomInLeft",
     "zoomInRight",
     "zoomInUp",
     "bounceOut",
     "bounceOutDown",
     "bounceOutLeft",
     "bounceOutRight",
     "bounceOutUp",
     "fadeOut",
     "fadeOutDown",
     "fadeOutDownBig",
     "fadeOutLeft",
     "fadeOutLeftBig",
     "fadeOutRight",
     "fadeOutRightBig",
     "fadeOutUp",
     "fadeOutUpBig",
     "flipOutX",
     "flipOutY",
     "lightSpeedOut",
     "rollOut",
     "rotateOut",
     "rotateOutDownLeft",
     "rotateOutDownRight",
     "rotateOutUpLeft",
     "rotateOutUpRight",
     "slideOutDown",
     "slideOutLeft",
     "slideOutRight",
     "slideOutUp",
     "slideOutRight",
     "zoomOut",
     "zoomOutDown",
     "zoomOutLeft",
     "zoomOutRight",
     "zoomOutUp"
 ]

In your composables imgMixin.ts file all the following code:

export function getImgUrl(path: string) {
 return require('@/assets/images/' + path);
}

Installing and usage

npm i vue-slider-component

Inside Your template tags add

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

Inside Your script tags add

import VueSlider from 'vue-slider-component'
 import 'vue-slider-component/theme/antd.css'
 import { ref } from "vue"
 const one = ref({
     value: 10,
     data: [10, 100]
 })
Supplemental

Installing and usage

npm i vue-cropperjs

Inside Your template tags add

<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>

Inside Your script tags add

import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import { Tooltip } from "bootstrap";
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();
    new Tooltip(document.body, {
        selector: "[data-bs-toggle='tooltip']",
    })
})
Supplemental

Inside Your template tags add

<h5>Sticky Note <a class="btn btn-primary pull-right m-l-10" id="add_new" href="javascript:;"  v-on:click="addNewSticky">Add New Note</a></h5>

<div class="note"  v-for="(n,index) in sticky_notes" :key="index">
    <a v-on:click="removeSticky(index)" class="button remove">X</a>
    <div class="note_cnt">
        <textarea class="title" placeholder="Enter note title" style="height: 64px;" v-text="n.title"></textarea>
        <textarea class="cnt" placeholder="Enter note description here" style="height: 200px;" v-text="n.description"></textarea>
    </div>
</div>

Inside Your script tags add

import { ref, onMounted } from "vue"
const sticky_notes = ref([])

onMounted(() => {
    sticky_notes.value.push({ title: '', description: '' });

})
function addNewSticky() {
    sticky_notes.value.push({ title: '', description: '' });
}
function removeSticky(index: number) {
    sticky_notes.value.splice(index, 1);
}
Animations

Inside Your template tags add

<div id="animation-box">
  <transition appear :enter-active-class="enterClass">
      <div class="box" :key="show">
      <div class="card">
        <div class="animate-widget">
          <div><img class="img-fluid" :src="getImgUrl('banner/3.jpg')" alt=""></div>
          <div class="text-center p-25">
            <p class="text-muted mb-0">Denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings</p>
          </div>
        </div>
      </div>
    </div>
     </transition>
  </div>
   <form class="theme-form text-center">
      <div class="mb-3">
           <select v-model="animation" @change="selectAnimate" class="form-select input input--dropdown js-animations text-center text-md-start">
          <option v-for="(anim, index) in animationList" :value="anim" :key="index">{{ anim }}</option>
          </select>
      </div>
       <button class="js-triggeraNimation btn btn-primary" @click.prevent="selectAnimated(animation)">Animate it</button>
    </form>

Inside Your script tags add

import { computed } from "vue";
import { getImgUrl } from "@/composables/commen/imgMixin"
import { animationList, animation, show } from "@/composables/commen/animationView"
function selectAnimate() {
    show.value = !show.value;
}
function selectAnimated(animation: boolean) {
    show.value = animation;
}
const enterClass = computed(() => {
    return `animated ${animation.value}`;
})

In your composables animationView.ts file all the following code:

import { ref } from "vue"

export const enterAnimation = ref<string>('bounceIn')
export const exitAnimation = ref<string>('flipOutX')
export const animation = ref<string>('bounce')
export const show = ref<boolean>(true)
export const animate = ref<boolean>(false)
export const active = ref<boolean>(false)
export const animationList = [
    "bounce",
    "flash",
    "flip",
    "headShake",
    "hinge",
    "jello",
    "pulse",
    "rubberBand",
    "shake",
    "swing",
    "tada",
    "wobble",
    "bounceIn",
    "bounceInDown",
    "bounceInLeft",
    "bounceInRight",
    "bounceInUp",
    "fadeIn",
    "fadeInDown",
    "fadeInDownBig",
    "fadeInLeft",
    "fadeInLeftBig",
    "fadeInRight",
    "fadeInRightBig",
    "fadeInUp",
    "fadeInUpBig",
    "flipInX",
    "flipInY",
    "lightSpeedIn",
    "rollIn",
    "rotateIn",
    "rotateInDownLeft",
    "rotateInDownRight",
    "rotateInUpLeft",
    "rotateInUpRight",
    "slideInDown",
    "slideInLeft",
    "slideInRight",
    "slideInUp",
    "zoomIn",
    "zoomInDown",
    "zoomInLeft",
    "zoomInRight",
    "zoomInUp",
    "bounceOut",
    "bounceOutDown",
    "bounceOutLeft",
    "bounceOutRight",
    "bounceOutUp",
    "fadeOut",
    "fadeOutDown",
    "fadeOutDownBig",
    "fadeOutLeft",
    "fadeOutLeftBig",
    "fadeOutRight",
    "fadeOutRightBig",
    "fadeOutUp",
    "fadeOutUpBig",
    "flipOutX",
    "flipOutY",
    "lightSpeedOut",
    "rollOut",
    "rotateOut",
    "rotateOutDownLeft",
    "rotateOutDownRight",
    "rotateOutUpLeft",
    "rotateOutUpRight",
    "slideOutDown",
    "slideOutLeft",
    "slideOutRight",
    "slideOutUp",
    "slideOutRight",
    "zoomOut",
    "zoomOutDown",
    "zoomOutLeft",
    "zoomOutRight",
    "zoomOutUp"
]

In your composables imgMixin.ts file all the following code:

export function getImgUrl(path: string) {
 return require('@/assets/images/' + path);
}

Installing and usage

npm i vue-aos

In your plugins/main.ts file all the following code:

import AosVue from "aos-vue";
.use(AosVue)

Inside Your template tags add

 <div class="row gallery grid my-gallery" id="aniimated-thumbnials" v-masonry>
<figure class="grid-item col-sm-4 col-md-3" data-aos="fade-down" v-masonry-tile v-for="(src, index) in masonryItems" :key="index" @click="() => showImg(index)">
   <aos-vue :animation="src.animation">
  <a>
  <img :src="getImgUrl(src.image)" alt="Image description" class="img-thumbnail" />
  </a>
</aos-vue>
</figure>
</div>
<vue-easy-lightbox :index="indexRef" :visible="visible" :imgs="lightBoxImages" @hide="handleHide">
</vue-easy-lightbox>

Inside Your script tags add

import { useMasonryStore } from "@/store/masonry"
 import { getImgUrl } from "@/composables/commen/imgMixin"
 import { ref, onMounted } from "vue"
 
 const store = useMasonryStore()
 const masonryItems = store.aos
 const lightBoxImages = ref([])
 const indexRef = ref<number>(0)
 const visible = ref<boolean>(false)
 
 function showImg(index: number) {
     indexRef.value = index
     visible.value = true
 }
 function handleHide() {
     visible.value = false
 }
 onMounted(() => {
     masonryItems.forEach(item => {
         lightBoxImages.value.push({ src: require('@/assets/images/' + item.image) })
     })
 })

In your composables imgMixin.ts file all the following code:

export function getImgUrl(path: string) {
 return require('@/assets/images/' + path);
}

Inside Your json tags add

{
"aos":[
        { "image":"masonry/1.jpg", "animation":"fade-down"},
        {"image":"masonry/2.jpg", "animation":"zoom-out-down"},
        { "image":"masonry/3.jpg", "animation":"flip-down"},
        {"image":"masonry/4.jpg","animation":"fade-up" },
        {"image":"masonry/5.jpg","animation":"flip-down" },
        { "image":"masonry/6.jpg", "animation":"fade-up" },
        { "image":"masonry/7.jpg", "animation":"flip-down" },
        { "image":"masonry/8.jpg", "animation":"fade-up"},
        { "image":"masonry/9.jpg", "animation":"flip-down" },
        { "image":"masonry/10.jpg", "animation":"fade-up" },
        { "image":"masonry/11.jpg", "animation":"flip-down" },
        { "image":"masonry/12.jpg", "animation":"fade-up" },
        { "image":"masonry/14.jpg", "animation":"flip-down" },
        { "image":"masonry/15.jpg", "animation":"flip-left" },
        { "image":"masonry/13.jpg", "animation":"flip-down" },
         { "image":"masonry/4.jpg", "animation":"zoom-out" },
         { "image":"masonry/5.jpg", "animation":"flip-right" },
         { "image":"masonry/6.jpg", "animation":"zoom-out" },
         { "image":"masonry/7.jpg", "animation":"zoom-out-up" },
         { "image":"masonry/8.jpg", "animation":"zoom-out-down" },
         { "image":"masonry/9.jpg", "animation":"flip-down" },
         { "image":"masonry/10.jpg", "animation":"slide-up" },
         { "image":"masonry/9.jpg", "animation":"flip-down" },
         { "image":"masonry/10.jpg", "animation":"fade-up" },
         { "image":"masonry/11.jpg", "animation":"flip-down" },
         { "image":"masonry/12.jpg", "animation":"fade-up" },
         { "image":"masonry/14.jpg", "animation":"flip-down" },
         { "image":"masonry/15.jpg", "animation":"flip-left" },
         { "image":"masonry/13.jpg", "animation":"flip-down" },
         { "image":"masonry/4.jpg", "animation":"zoom-out" },
         { "image":"masonry/5.jpg", "animation":"flip-right" },
         { "image":"masonry/6.jpg", "animation":"zoom-out" },
         { "image":"masonry/7.jpg", "animation":"zoom-out-up" }
    ]
}

Inside Your pinia store ts tags add

import { defineStore } from 'pinia'                                                                 
interface aos {
    image: string,
    animation: string
}
import masonry from "@/data/masonry.json"

export const useMasonryStore = defineStore('masonry', () => {

    const aos: aos[] = (JSON.parse(JSON.stringify(masonry.aos)))  
    return {
        aos,
    }
})
Supplemental
Icons

To use another types button you have to link the related css file according to types of buttons in a head tag

Tables
Id First Name Last Name Username Designation Company Language Country
1 Ram Jacob Wolfe RamJacob@twitter Developer Apple Inc. Php IND
2 John Deo Gummer JohnDeo@twitter Designer Hewlett packard Html US
3 Elana John Cazale ElanaJohn@twitter Designer Microsoft Pug UK
4 Meryl Streep Roberts MerylStreep@twitter Developer Tata Ltd. React IDN
5 Emma Stone Stone EmmaStone@twitter Developer Wipro Ltd. Vue IRN

Inside Your template tags add

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr class="border-bottom-primary">
        <th scope="col">Id</th>
        <th scope="col">First Name</th>
         <th scope="col">Last Name</th>
         <th scope="col">Username</th>
         <th scope="col">Designation</th>
         <th scope="col">Company</th>
         <th scope="col">Language</th>
         <th scope="col">Country</th>
      </tr>
    </thead>
    <tbody >
      <tr :class="data.borderColor" v-for="data in bootstraplist" :key="data">
       <th scope="row">{{data.id}}</th>
       <td><img  :src="getImgUrl(data.img)" alt="" class="img-fluid me-2 rounded-pill">{{data.firstName}}</td>
       <td>{{data.lastName}}</td>
       <td>{{data.userName}}</td>
       <td>{{data.role}}</td>
       <td>{{data.company}}</td>
       <td>
       <div class="badge " :class="data.badgeClass">
      {{data.language}}
      </div>
      </td>
      <td>{{data.country}}</td>
      </tr>
    </tbody>
  </table>
</div>

Inside Your script tags add

import { useBootstrapStore } from "@/store/bootstrap"
 import { getImgUrl } from "@/composables/commen/imgMixin"
 
 const store = useBootstrapStore()
 const bootstraplist = store.data

In your composables imgMixin.ts file all the following code:

export function getImgUrl(path: string) {
 return require('@/assets/images/' + path);
}

Inside Your json tags add

{
"datatable1": [
{
  "id": 1,
  "img": "user/1.jpg",
  "firstName": "Ram Jacob",
  "lastName": "Wolfe",
  "userName": "RamJacob@twitter",
  "role": "Developer",
  "company": "Apple Inc.",
  "language": "Php",
  "badgeClass": "badge-light-danger",
  "credit": "$3500.00",
  "borderColor": "border-bottom-secondary",
  "country": "IND"
},
{
  "id": 2,
  "img": "user/2.png",
  "firstName": "John Deo",
  "lastName": "Gummer",
  "userName": "JohnDeo@twitter",
  "role": "Designer",
  "company": "Hewlett packard",
  "language": "Html",
  "badgeClass": "badge-light-primary",
  "credit": "$2400.00",
  "borderColor": "border-bottom-success",
  "country": "US"
},
{
  "id": 3,
  "img": "user/3.jpg",
  "firstName": "Elana John",
  "lastName": "Cazale",
  "userName": "ElanaJohn@twitter",
  "role": "Designer",
  "company": "Microsoft",
  "language": "Pug",
  "badgeClass": "badge-light-danger",
  "credit": "$2560.00",
  "borderColor": "border-bottom-info",
  "country": "UK"
},
{
  "id": 4,
  "img": "user/3.png",
  "firstName": "Meryl Streep",
  "lastName": "Roberts",
  "userName": "MerylStreep@twitter",
  "role": "Developer",
  "company": "Tata Ltd.",
  "language": "React",
  "badgeClass": "badge-light-success",
  "credit": "$1870.00",
  "borderColor": "border-bottom-warning",
  "country": "IDN"
},
{
  "id": 5,
  "img": "user/6.jpg",
  "firstName": "Emma Stone",
  "lastName": "Stone",
  "userName": "EmmaStone@twitter",
  "role": "Developer",
  "company": "Wipro Ltd.",
  "badgeClass": "badge-light-primary",
  "language": "Vue",
  "credit": "$4580.00",
  "borderColor": "border-bottom-danger",
  "country": "IRN"
},
{
  "id": 6,
  "img": "user/7.jpg",
  "firstName": "Eliana Jons",
  "lastName": "Jons",
  "userName": "ElianaJons@twitter",
  "role": "Developer",
  "company": "Info Ltd.",
  "badgeClass": "badge-light-success",
  "language": "Vue",
  "credit": "$4580.00",
  "borderColor": "border-bottom-light",
  "country": "IRN"
}
]
}

Inside Your pinia store ts tags add

import { defineStore } from 'pinia'
interface table {
    id: number,
    img: string,
    firstName: string,
    lastName: string,
    userName: string,
    role: string,
    company: string,
    language: string,
    badgeClass: string,
    credit: string,
    borderColor: string,
    country: string
}
import bootstrap from "@/data/bootstrap.json"

export const useBootstrapStore = defineStore('bootstrap', () => {

    const data: table[] = (JSON.parse(JSON.stringify(bootstrap.datatable1)))
    return {
        data, 
    }
})
Cards
Basic Card

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.

Inside Your template tags add

 <div class="col-sm-12 col-xl-6" v-for="(item, index) in basic" :key="index">
 <div class="card">
   <div class="card-header pb-0" v-html="item.title"> 
   </div>
   <div class="card-body">
     <p class="mb-0" >{{ item.description }} </p>
   </div>
 </div>
</div>

Inside Your script tags add

import { useCardStore } from "@/store/card"
 const store = useCardStore() 
 const basic = store.basic

Inside Your json tags add


      {
        "basic":[
        {
            "title":"<h5>Basic Card</h5>",
            "description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
          },
           {
            "title":"<h5>Without shadow Card</h5>",
            "description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
          },
          {
            "title":"<h5>Flat Card</h5>",
            "description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
          },
         
          {
            "title":"<h5><i class='icofont icofont-truck me-2'></i> Icon in Heading</h5>",
            "description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
          },
          {
            "title":"<h5>Card sub Title</h5><span>Using the <a href='#'>card</a> component, you can extend the default collapse behavior to create an accordion.</span>",
            "description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
          }
    ],
      }

Inside Your pinia store ts tags add

import { defineStore } from 'pinia'

 interface basic {
     title: string | number,
     description: string
 }

 import card from "@/data/card.json"
 
 export const useCardStore = defineStore('card', () => {
 
     const basic: basic[] = (JSON.parse(JSON.stringify(card.basic)))
    
     return {
         basic,
        
     }
 })

Inside Your template tags add

npm i vue-draggable-next

Inside Your template tags add

 <draggable class="row" >
<div class="col-sm-12  col-xl-6 " v-for="(element, index) in cards" :key="index" >   
    <div class="card" >
        <div class="card-header pb-0" v-html="element.title"></div>
        <div class="card-body">
            <p v-text="element.description"></p>
        </div>
    </div>
</div> 
</draggable>

Inside Your script tags add

import { useCardStore } from "@/store/card"
import { VueDraggableNext } from 'vue-draggable-next'
const store = useCardStore()
const cards = store.draggabler
const draggable = VueDraggableNext

Inside Your json tags add

{
    "draggable": [
    {
      "title": "<h5>Basic Card</h5>",
      "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
    },
    {
      "title": "<h5>Flat Card</h5>",
      "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
    },
    {
      "title": "<h5>Without shadow Card</h5>",
      "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
    },
    {
      "title": "<h5><i class='icon-move mr-2'></i> Icon in Heading</h5>",
      "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
    },
    {
      "title": "<h5>Card sub Title</h5><span>Using the <a href='#'>card</a> component, you can extend the default collapse behavior to create an accordion.</span>",
      "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
    },
    {
      "title": "<h5>Card sub Title</h5><span>Using the <a href='#'>card</a> component, you can extend the default collapse behavior to create an accordion.</span>",
      "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled."
    }
  ]
    }

Inside Your pinia store ts tags add

import { defineStore } from 'pinia'
 interface basic {
     title: string | number,
     description: string
 }
 import card from "@/data/card.json"
 
 export const useCardStore = defineStore('card', () => {
     const draggabler: basic[] = (JSON.parse(JSON.stringify(card.draggable)))
     return {
         draggabler,
     }
 })
Supplemental
Creative Card

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry 

<div class="col-sm-12 col-md-6 col-xl-6" v-for="(element, index) in creative" :key="index">
<div class="card" :class="element.card" >
  <div class="card-header " :class="element.header">
    <h5  :class="element.class">{{card.title}}</h5>
  </div>
  <div class="card-body">
    <p>{{element.desc}}</p>
  </div>
</div>
</div>

Inside Your script tags add

import { useCardStore } from "@/store/card"
const store = useCardStore()
const creative = store.creative

Inside Your json tags add

{
"creative":[
{
    "id":0,
    "title":"Border left",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"b-l-primary"
},
{
    "id":1,
    "title":"Border right",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"b-r-secondary"
},
{
    "id":2,
    "title":"Border top",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"b-t-success"
},
{
    "id":3,
    "title":"Border bottom",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"b-b-info"
},
{
    "id":4,
    "title":"Border color state",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"b-l-warning"
},
{
    "id":5,
    "title":"Border color state",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"b-l-danger"
},
{
    "id":6,
    "title":"Border color state",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"b-l-light"
},
{
    "id":7,
    "title":"Border color state",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"b-l-primary"
},
{
    "id":8,
    "title":"Border color state",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"b-l-secondary border-2"
},
{
    "id":9,
    "title":"Border color state",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"b-l-primary border-3"
},
{
    "id":10,
    "title":"Absolute Style",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"bg-primary",
    "card":"card-absolute",
    "class":"text-white"
},
{
    "id":11,
    "title":"Color state",
    "desc":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.",
    "header":"bg-secondary",
    "card":"card-absolute",
    "class":"text-white"
}
],
}

Inside Your pinia store ts tags add

import { defineStore } from 'pinia'
 interface creative {
     id: number,
     title: string,
     desc: string,
     header: string,
     card: string,
     class: string
 }
                                                                  
 import card from "@/data/card.json"
 
 export const useCardStore = defineStore('card', () => {
 
     const creative: creative[] = (JSON.parse(JSON.stringify(card.creative)))
     
     return {
         creative,
       
     }
 })
Charts

Installing and usage

npm i vue3-apexcharts

In your plugins/main.ts file all the following code:

import VueApexCharts from "vue3-apexcharts";
    .use(VueApexCharts)

Inside Your template tags add

<apexchart
    type="area"
    height="350"
    ref="chart"
    :options="chartOptions"
    :series="series">
    <apexchart>

Inside Your script tags add

import chart from "@/data/chart.json"
var primary = localStorage.getItem('primary_color') || '#3e5fce';

const series = [
    {
        name: "STOCK ABC",
        data: chart.monthDataSeries1.prices,
    },
]
const chartOptions = {
    chart: {
        height: 350,
        type: "area",
        zoom: {
            enabled: false,
        },
        toolbar: {
            show: false,
        },
    },
    dataLabels: {
        enabled: false,
    },
    stroke: {
        curve: "straight",
    },
    title: {
        text: "Fundamental Analysis of Stocks",
        align: "left",
    },
    subtitle: {
        text: "Price Movements",
        align: "left",
    },
    labels: chart.monthDataSeries1.dates,
    xaxis: {
        type: "datetime",
    },
    yaxis: {
        opposite: true,
    },
    legend: {
        horizontalAlign: "left",
    },
    colors: [primary],
}

Inside Your json tags add

{
"monthDataSeries1": {
    "prices": [
        8107.85,
        8128.0,
        8122.9,
        8165.5,
        8340.7,
        8423.7,
        8423.5,
        8514.3,
        8481.85,
        8487.7,
        8506.9,
        8626.2,
        8668.95,
        8602.3,
        8607.55,
        8512.9,
        8496.25,
        8600.65,
        8881.1,
        9340.85
    ],
    "dates": [
        "13 Nov 2017",
        "14 Nov 2017",
        "15 Nov 2017",
        "16 Nov 2017",
        "17 Nov 2017",
        "20 Nov 2017",
        "21 Nov 2017",
        "22 Nov 2017",
        "23 Nov 2017",
        "24 Nov 2017",
        "27 Nov 2017",
        "28 Nov 2017",
        "29 Nov 2017",
        "30 Nov 2017",
        "01 Dec 2017",
        "04 Dec 2017",
        "05 Dec 2017",
        "06 Dec 2017",
        "07 Dec 2017",
        "08 Dec 2017"
    ]
}
}
Supplemental

Installing and usage

npm i vue-google-charts

Inside Your template tags add

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

Inside Your script tags add

 import { GChart } from "vue-google-charts";
 var primary = localStorage.getItem('primary_color') || '#3e5fce';
 var secondary = localStorage.getItem('secondary_color') || '#ffce00';
 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, secondary, "#51bb25"],
         height: 500,
         width: '100%',
 
     },
 }
Supplemental

Installing and usage

npm i vue-chartist

In your plugins/main.js file all the following code:

import vueChartist from "vue-chartist";
.use(vueChartist)

Inside Your template tags add

<chartist
class="ct-6 flot-chart-container" 
ratio=""
type="Pie"
:data="chart8.data"
:options="chart8.options" 
:event-handlers="chart8.eventHandlers">
<chartist>

Inside Your script tags add

 const chart8 = {
data: {
    series: [10, 20, 50, 20, 5, 50, 15],
    labels: [1, 2, 3, 4, 5, 6, 7]
},
options: {
    donut: true,
    showLabel: false,
},
eventHandlers: [{
    event: 'draw',
    fn(data: any) {
        if (data.type === 'slice') {
            const pathLength = data.element._node.getTotalLength();
            data.element.attr({
                'stroke-dasharray': pathLength + 'px ' + pathLength + 'px',
                                                            
            });
            const animationDefinition = {
                'stroke-dashoffset': {
                    id: 'anim' + data.index,
                    dur: 1000,
                    begin: 1000 * data.index,
                    from: -pathLength + 'px',
                    to: '0px',
                    fill: 'freeze'
                }
            };
                                                            
            data.element.attr({
                'stroke-dashoffset': -pathLength + 'px'
            });
            data.element.animate(animationDefinition, false);
        }
    }
}]
}
Supplemental
Maps

Installing and usage

npm i vue3-google-map

Inside Your template tags add

<GoogleMap :center="{lat:20.5937, lng:78.9629}" :zoom="12" style="width: auto; height: 500px"><GoogleMap>

Inside Your script tags add

import { GoogleMap, Marker } from "vue3-google-map";
Supplemental

Installing and usage

npm i @vue-leaflet/vue-leaflet

Inside Your template tags add

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

Inside Your script tags add

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

Inside Your style tags add

@import "leaflet/dist/leaflet.css";
Supplemental
Editors

Installing and usage

npm i vue3-quill

In your plugins/main.ts file all the following code:

import { quillEditor } from "vue3-quill";
.use(quillEditor)

Inside Your template tags add

<quill-editor
v-model:value="state.content" 
:options="state.editorOption"
@change="onEditorChange($event)" />

Inside Your script tags add

import { reactive } from 'vue'
const state = reactive({
    content: '
Some initial content
',
    _content: '',
    editorOption: {
        placeholder: 'core',
    },
    disabled: false
})
const onEditorChange = (html: string) => {

    state._content = html
}
setTimeout(() => {
    state.disabled = true
}, 2000)
Supplemental

Installing and usage

npm i @ckeditor/ckeditor5-vue

Inside Your template tags add

<ckeditor :editor="editor"  v-model="editorData"><ckeditor>

Inside Your script tags add

import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 import { ref } from "vue"
 const ckeditor = CKEditor.component
 const editor = ClassicEditor
 const editorData = ref<string>('<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>')
Supplemental