Top
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.js file all the following code:
import 'bootstrap/dist/css/bootstrap.css'
import "bootstrap"
import "bootstrap/dist/js/bootstrap.min.js";
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
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>
Inside Your template tags add
<button type="button" class="btn btn-primary example-popover mr-1" 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 tabindex="0" class="example-popover btn btn-secondary" role="button" 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 type="button" data-bs-trigger="hover" class="example-popover btn btn-success" 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/dist/js/bootstrap.esm.min.js'
export default {
mounted() {
new Popover(document.body, {
selector: "[data-bs-toggle='popover']",
})
}
}
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">Click to toggle popover</button>
Inside Your script tags add
import { Tooltip } from 'bootstrap/dist/js/bootstrap.esm.min.js'
export default {
mounted() {
new Tooltip(document.body, {
selector: "[data-bs-toggle='tooltip']",
}),
}
}
Inside Your template tags add
<div class="dropdown">
<button class="dropbtn btn-primary" type="button"> Dropdown Button
<span><i className="icofont icofont-arrow-down"></i></span></button>
<div className="dropdown-content">
<a href="#">Action </a>
<a href="#">Another Action </a>
<a href="#">Something Else Here </a>
</div>
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">Dropdown</a>
<div class="dropdown-menu"><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
export default {
data(){
return{
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 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
<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
export default {
data(){
return{
desc:"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."
}
},
}
Installing and usage
npm i vue3-perfect-scrollbar
In your plugins/main.js 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="settings">
<img src="@/assets/images/banner/3.jpg" alt="girl" width="800" height="600" >
</perfect-scrollbar>
Inside Your script tags add
export default {
data() {
return{
settings: {
maxScrollbarLength: 60
},
}
}
}
Installing and usage
npm i vue3-tree
Inside Your template tags add
<Tree :nodes="menu" :use-icon="true" @nodeExpanded="onNodeExpanded" @update="onUpdate" />
Inside Your script tags add
import treeMixin from "@/mixins/commen/treeMixin"
export default {
mixins:[treeMixin],
};
Inside Your mixin add
import Tree from "vue3-tree";
import "vue3-tree/dist/style.css";
const treeMixin = {
components: { Tree },
data() {
return {
menu: [
{
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",
},
],
};
},
};
export default treeMixin
Installing and usage
npm i @kyvg/vue3-notification
In your plugins/main.js file all the following code:
import Notifications from '@kyvg/vue3-notification'
.use(Notifications)
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
export default {
components:{
},
data(){
return{
enternotify: "top left",
entericon:"none",
notifyList: [
{icon:"none"},
{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"},
],
}
},
methods:{
selectnotify() {
},
showNotify(){
this.$notify({
color:"secondary",
title: "New Order has been placed",
});
},
}
}
Installing and usage
npm i vue-star-rating
npm install vue-rate@next
In your plugins/main.js 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';
export default {
components:{
StarRating,
},
data(){
return{
rating: "0",
rating1:"0",
rating2:"0",
disabled: false
}
},
methods:{
currentRating() {
return this.rating
},
currentRatingText1() {
return this.rating1
},
currentRatingText() {
return this.rating2
}
}
}
Installing and usage
npm i dropzone-vue
Inside Your template tags add
<DropZone
:maxFileSize="Number(60000000)"
:uploadOnDrop="true"
:dropzoneMessageClassName="customClass">
</DropZone>
Inside Your script tags add
import DropZone from "dropzone-vue";
export default {
components:{
DropZone
},
}
Inside Your style tags add
@import 'dropzone-vue/dist/dropzone-vue.common.css';
Installing and usage
npm i vue3-tour
In your plugins/main.js file all the following code:
import Vue3Tour from 'vue3-tour'
import 'vue3-tour/dist/vue3-tour.css'
.use(Vue3Tour)
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" ></i>
</router-link>
<v-tour name="myTour" :steps="steps" :options="tourOptions"></v-tour>
Inside Your script tags add
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();
},
}
Installing and usage
npm i vue-sweetalert2
In your plugins/main.js file all the following code:
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
.use(VueSweetalert2)
Inside Your template tags add
<button class="btn btn-danger sweet-5" type="button" v-on:click="basic_warning_alert" >Danger alert</button>
Inside Your script tags add
export default {
methods:{
basic_warning_alert:function(){
this.$swal({
icon: 'warning',
title:"Are you sure?",
text:'Once deleted, you will not be able to recover this imaginary file!',
showCancelButton: true,
confirmButtonText: 'Ok',
confirmButtonColor: 'var(--theme-deafult)',
cancelButtonText: 'Cancel',
cancelButtonColor: '#efefef',
}).then((result)=>{
if(result.value){
this.$swal({
icon: 'success',
text:'Poof! Your imaginary file has been deleted!',
type:'success',
confirmButtonColor: 'var(--theme-deafult)',
});
}else{
this.$swal({
text:'Your imaginary file is safe!',
confirmButtonColor: 'var(--theme-deafult)',
});
}
});
},
}
}
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="@/assets/images/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 animationMixin from "@/mixins/commen/animationMixin";
export default {
mixins: [animationMixin],
methods: {
isActive(path) {
this.animate = path
document.getElementById("mod").className = `modal-dialog ${path} animated`
},
close() {
document.getElementById("mod").className = `modal-dialog ${this.exitAnimation} animated`
},
},
computed: {
enterClass() {
return `animated ${this.enterAnimation}`;
}
}
};
Inside Your mixin tags add
const animationMixin = {
data() {
return {
msg: "Welcome to Your Vue.js App",
enterAnimation:'bounceIn',
exitAnimation:'flipOutX',
animation:'bounce',
show: true,
animate: false,
active: false,
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"
]
};
},
}
export default animationMixin
Installing and usage
npm i swiper
Inside Your template tags add
<swiper
:autoHeight="true"
:breakpoints="swiperOptions"
:slidesPerView="1"
:spaceBetween="10"
:pagination="{
clickable: true,
}"
:modules="modules"
class="mySwiper"
>
<swiper-slide v-for="item in owlcarousel" :key="item">
<div class="item"><img :src="getImgUrl(item.img)" alt=""></div>
</swiper-slide>
</swiper>
Inside Your script tags add
import { Swiper, SwiperSlide } from "swiper/vue";
import imageMixin from "@/mixins/commen/imageMixin"
import "swiper/css";
import "swiper/css/pagination";
import { Pagination } from "swiper";
import { mapState } from "vuex";
export default {
mixins:[imageMixin],
components: {
Swiper,
SwiperSlide,
},
data() {
return {
swiperOptions: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 4,
spaceBetween: 40,
},
1024: {
slidesPerView: 5,
spaceBetween: 50,
}
},
}
},
computed: {
...mapState({
owlcarousel: (state) => state.owlcarousel.items,
}),
},
methods: {
},
setup() {
return {
modules: [Pagination],
};
},
}
Inside Your mixin tags add
const imageMixin = {
methods: {
getImgUrl(path) {
return require('@/assets/images/'+path);
},
},
}
export default imageMixin
Inside Your json tags add
{
"items":[
{"img":"slider/1.jpg"},
{"img":"slider/1.jpg"},
{"img":"slider/2.jpg"},
{"img":"slider/3.jpg"},
{"img":"slider/4.jpg"},
{"img":"slider/5.jpg"},
{"img":"slider/6.jpg"},
{"img":"slider/7.jpg"},
{"img":"slider/8.jpg"},
{"img":"slider/9.jpg"},
{"img":"slider/10.jpg"},
{"img":"slider/11.jpg"}
],
}
Inside Your store js tags add
import owlcarousel from "../../data/owlcarousel"
const state = {
items : owlcarousel.items
};
export default {
namespaced: true,
state,
}
Installing and usage
npm i vue-slider-component
Inside Your template tags add
<VueSlider v-model="one.value" :data="one.data" :marks="true" :tooltip="'always'" :tooltip-placement="'top'" ></VueSlider>
Inside Your script tags add
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]
},
}
}
}
Installing and usage
npm i vue-cropperjs
Inside Your template tags add
<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>
Inside Your script tags add
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 }
]
};
},
}
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
export default {
data(){
return{
sticky_notes:[]
};
},
mounted(){
this.sticky_notes.push({ title:'',description:'' });
},
methods:{
addNewSticky:function() {
this.sticky_notes.push({ title:'',description:'' });
},
removeSticky:function(index) {
this.sticky_notes.splice(index,1);
}
}
}
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="@/assets/images/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 animationMixin from "@/mixins/commen/animationMixin";
export default {
mixins: [animationMixin],
methods: {
selectAnimate() {
this.show = !this.show;
},
selectAnimated(animation) {
this.show = animation;
}
},
computed: {
enterClass() {
return `animated ${this.animation}`;
}
}
}
Inside Your mixin tags add
const animationMixin = {
data() {
return {
msg: "Welcome to Your Vue.js App",
enterAnimation:'bounceIn',
exitAnimation:'flipOutX',
animation:'bounce',
show: true,
animate: false,
active: false,
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"
]
};
},
}
export default animationMixin
Installing and usage
npm i vue-aos
In your plugins/main.js 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
:visible="visible"
:imgs="lightBoxImages"
@hide="handleHide">
</vue-easy-lightbox>
Inside Your script tags add
import imageMixin from "@/mixins/commen/imageMixin"
import { mapState } from "vuex";
export default {
mixins: [imageMixin],
data(){
return{
lightBoxImages:[],
lightBoxTitle:[],
visible: false,
}
},
methods: {
showImg (index) {
this.index = index
this.visible = true
},
handleHide () {
this.visible = false
},
},
computed: {
...mapState({
masonryItems:(state)=>state.masonry.aos,
}),
},
mounted(){
this.masonryItems.forEach(item=>{
this.lightBoxImages.push(require('@/assets/images/'+item.image))
this.lightBoxTitle.push(item.title)
})
}
};
Inside Your mixin tags add
const imageMixin = {
methods: {
getImgUrl(path) {
return require('@/assets/images/'+path);
},
},
}
export default imageMixin
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 store js tags add
import masonry from "../../data/masonry.json"
const state = {
aos : masonry.aos
};
export default {
namespaced: true,
state,
}
To use another types button you have to link the related css file according to types of buttons in a head tag
Installing and usage
npm i vue3-datepicker
In your plugins/main.js file all the following code:
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
.component('Datepicker', Datepicker)
Inside Your template tags add
<datepicker datepicker class=" datetimepicker-input digits" v-model="date" :format="format" />
Inside Your script tags add
import { ref } from 'vue';
export default {
setup() {
const date = ref();
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return ` ${day}/${month}/${year}`;
}
return {
date,
format,
}
}
}
Installing and usage
npm i vue3-simple-typeahead
In your plugins/main.js file all the following code:
import SimpleTypeahead from 'vue3-simple-typeahead';
import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css';
.use(SimpleTypeahead)
Inside Your template tags add
<vue3-simple-typeahead :items="list" class="form-control typeahead form-control" :placeholder="options.placeholder" @selectItem="selectItem" @onInput="onInput" @onBlur="onBlur" :minInputLength="options.minInputLength" />
Inside Your script tags add
import typeaheadMixin from "@/mixins/commen/typeaheadMixin"
export default {
mixins: [typeaheadMixin],
}
Inside Your mixin tags add
const typeaheadMixin = {
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',
'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;
},
},
}
export default typeaheadMixin
Id | First Name | Last Name | Username | Designation | Company | Language | Country |
---|---|---|---|---|---|---|---|
1 | ![]() |
Wolfe | RamJacob@twitter | Developer | Apple Inc. | Php | IND |
2 | ![]() |
Gummer | JohnDeo@twitter | Designer | Hewlett packard | Html | US |
3 | ![]() |
Cazale | ElanaJohn@twitter | Designer | Microsoft | Pug | UK |
4 | ![]() |
Roberts | MerylStreep@twitter | Developer | Tata Ltd. | React | IDN |
5 | ![]() |
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 imageMixin from "@/mixins/commen/imageMixin"
import { mapState } from 'vuex';
export default {
mixins:[imageMixin],
computed: {
...mapState({
bootstraplist: state => state.bootstrap.tableData1,
})
},
}
Inside Your mixin tags add
const imageMixin = {
methods: {
getImgUrl(path) {
return require('@/assets/images/'+path);
},
},
}
export default imageMixin
Inside Your json tags add
{
"tableData1":[
{
"id": 1,
"img": "dashboard/default/01.png",
"firstName": "Ram Jacob",
"lastName": "Wolfe",
"userName": "RamJacob@twitter",
"role": "Developer",
"company": "Apple Inc.",
"language": "Php",
"badgeClass": "badge-light-primary",
"credit": "$3500.00",
"borderColor": "border-bottom-secondary",
"country": "IND"
},
{
"id": 2,
"img": "dashboard/default/02.png",
"firstName": "John Deo",
"lastName": "Gummer",
"userName": "JohnDeo@twitter",
"role": "Designer",
"company": "Hewlett packard",
"language": "Html",
"badgeClass": "badge-light-success",
"credit": "$2400.00",
"borderColor": "border-bottom-success",
"country": "US"
},
{
"id": 3,
"img": "dashboard/default/03.png",
"firstName": "Elana John",
"lastName": "Cazale",
"userName": "ElanaJohn@twitter",
"role": "Designer",
"company": "Microsoft",
"language": "Pug",
"badgeClass": "badge-light-primary",
"credit": "$2560.00",
"borderColor": "border-bottom-info",
"country": "UK"
},
{
"id": 4,
"img": "dashboard/default/04.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": "dashboard/default/05.png",
"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": "dashboard/default/01.png",
"firstName": "Eliana Jons",
"lastName": "Jons",
"userName": "ElianaJons@twitter",
"role": "Developer",
"company": "Info Ltd.",
"badgeClass": "badge-light-primary",
"language": "Vue",
"credit": "$4580.00",
"borderColor": "border-bottom-light",
"country": "IRN"
}
],
}
Inside Your store js tags add
import bootstrap from "../../data/bootstrap.json"
const state = {
tableData1 : bootstrap.tableData1,
};
export default {
namespaced: true,
state,
};
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="element in cards" :key="element">
<div class="card">
<div class="card-header pb-0" v-html="element.title">
</div>
<div class="card-body">
<p class="mb-0" v-text="element.description"></p>
</div>
</div>
</div>
Inside Your script tags add
import { mapState } from "vuex";
export default {
computed: {
...mapState({
cards:(state)=>state.card.basic,
}),
},
};
Inside Your json tags add
{
"basic":[
{
"title":"<h4>Basic Card</h4>",
"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":"<h4>Without shadow Card</h4>",
"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":"<h4>Flat Card</h4>",
"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":"<h4><i class='icofont icofont-truck me-2'></i> Icon in Heading</h4>",
"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":"<h4>Card sub Title</h4><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 store js tags add
import card from "../../data/card.json"
const state = {
basic :card.basic,
};
export default {
namespaced: true,
state,
}
Inside Your template tags add
npm i vue-aos
Inside Your template tags add
<draggable class="row" >
<div class="col-sm-12 col-xl-6 " v-for="element in cards" :key="element" >
<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 { mapState } from "vuex";
import { VueDraggableNext } from 'vue-draggable-next'
export default {
components:{
draggable: VueDraggableNext,
},
computed: {
...mapState({
cards:(state)=>state.card.draggable,
}),
},
};
Inside Your json tags add
{
"basic":[
{
"title":"<h4>Basic Card</h4>",
"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":"<h4>Without shadow Card</h4>",
"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":"<h4>Flat Card</h4>",
"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":"<h4><i class='icon-move mr-2'></i> Icon in Heading</h4>",
"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":"<h4>Card sub Title</h4><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 store js tags add
import card from "../../data/card.json"
const state = {
draggable: card.draggable,
};
export default {
namespaced: true,
state,
}
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="card in creativelist" :key="card">
<div class="card" :class="card.card" >
<div class="card-header " :class="card.header">
<h4 :class="card.class">{{card.title}}</h4>
</div>
<div class="card-body">
<p>{{card.desc}}</p>
</div>
</div>
</div>
Inside Your script tags add
import { mapState } from "vuex";
export default {
computed: {
...mapState({
creativelist:(state)=>state.card.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 store js tags add
import card from "../../data/card.json"
const state = {
creative : card.creative,
};
export default {
namespaced: true,
state,
}
Installing and usage
npm i vue3-apexcharts
In your plugins/main.js 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') || '#5c61f2';
export default {
data(){
return{
series: [
{
name: "STOCK ABC",
data: chart.monthDataSeries1.prices,
},
],
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],
}
}
},
mounted() {
this.series[0].data = chart.monthDataSeries1.prices;
},
}
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"
]
}
}
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
var primary = localStorage.getItem('primary_color') || '#5c61f2';
var secondary = localStorage.getItem('secondary_color') || '#eeb82f';
import { GChart } from "vue-google-charts";
export default {
components:{
GChart
},
data(){
return{
chartsLib: null,
area_chart: {
chartData_1: [
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
],
options_1: {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
width:'100%',
height: 400,
colors: [primary, secondary]
},
},
}
}
}
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-8 flot-chart-container"
ratio=""
type="Pie"
:data="chart3.data"
:options="chart3.options"
:event-handlers="chart3.eventHandlers">
<chartist>
Inside Your script tags add
import * as Chartist from 'chartist';
export default {
data(){
return{
chart3 : {
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) {
if(data.type === 'slice') {
var pathLength = data.element._node.getTotalLength();
data.element.attr({
'stroke-dasharray': pathLength + 'px ' + pathLength + 'px',
});
var animationDefinition = {
'stroke-dashoffset': {
id: 'anim' + data.index,
dur: 1000,
begin: 1000 * data.index,
from: -pathLength + 'px',
to: '0px',
easing: Chartist.Svg.Easing.easeOutQuint,
fill: 'freeze'
}
};
if(data.index !== 0) {
animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
}
data.element.attr({
'stroke-dashoffset': -pathLength + 'px'
});
data.element.animate(animationDefinition, false);
}
}
}]
},
}
}
}
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";
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 "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',
},
}
}
}
Installing and usage
npm i vue3-quill
In your plugins/main.js 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"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)" />
Inside Your script tags add
import { reactive } from 'vue'
export default {
setup() {
const state = reactive({
content: 'Some initial content
',
_content: '',
editorOption: {
placeholder: 'core',
},
disabled: false
})
const onEditorBlur = (quill) => {
}
const onEditorFocus = (quill) => {
}
const onEditorReady = (quill) => {
}
const onEditorChange = ({ quill, html, text }) => {
state._content = html
}
setTimeout(() => {
state.disabled = true
}, 2000)
return { state, onEditorBlur, onEditorFocus, onEditorReady, onEditorChange }
},
};
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';
export default {
components: {
ckeditor: CKEditor.component
},
data() {
return {
editor: ClassicEditor,
editorData: '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.
'
};
}
}