<Tree :nodes="menu" :use-icon="true" @nodeExpanded="onNodeExpanded" @update="onUpdate" />

import Tree from "vue3-tree";
import "vue3-tree/dist/style.css";
export default {
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",
          },
        ],
      };
    },
  };

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

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

});
    },
  }
}

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

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

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

import DropZone from "dropzone-vue";
export default {
components:{
  DropZone
},
}

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

import animatedModal from "@/mixins/animatedModal";
export default {
mixins: [animatedModal],
name: "VueAnimate",          
};

          const animatedModal = {
data() {
  return {
    msg: "Welcome to Your Vue.js App",
  enterAnimation:'bounceIn',
  exitAnimation:'flipOutX',
    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"
    ]
  };
},
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}`;
  }
}           
          }
            
export default animatedModal

<swiper
:autoHeight="true"
:slidesPerView="5"
:spaceBetween="30"
:pagination="{
clickable: true,
}"
:modules="modules"
class="mySwiper"
>
<swiper-slide v-for="item in owlcarousel" :key="item">   
   <div class="item"><img :src="getImageUrl(item.img)" style="height:200px; width: 294.2px;  border-radius: 5px;" alt=""></div>
   </swiper-slide>
    </swiper>

import { Swiper, SwiperSlide } from "swiper/vue";

import "swiper/css";

import "swiper/css/pagination";
import { Pagination } from "swiper";
import { mapState } from "vuex";
export default {
   components: {
  Swiper,
  SwiperSlide,
},
  data(){
      return{
         
      }
  },
   computed: {
  ...mapState({
    owlcarousel:(state)=>state.owlcarousel.items,    
  }),
 },
   methods: {
  getImageUrl(path) {
    return require("@/assets/images/slider/" + path);
  },
},
 setup() {
  return {
    modules: [Pagination],
  };
},
}

{
  "items":[
      {"img":"1.jpg"},
      {"img":"1.jpg"},
      {"img":"2.jpg"},
      {"img":"3.jpg"},
      {"img":"4.jpg"},
      {"img":"5.jpg"},
      {"img":"6.jpg"},
      {"img":"7.jpg"},
      {"img":"8.jpg"},
      {"img":"9.jpg"},
      {"img":"10.jpg"},
      {"img":"11.jpg"}
  ]
}

import owlcarousel from "../../data/owlcarousel"

const state = {
  items : owlcarousel.items
};

export default {
  namespaced: true,
  state,
}

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

<figure  v-masonry-tile  class="grid-item col-sm-4 col-md-3" v-for="(src, index) in imgs" :key="index" @click="() => showImg(index)" >
  <aos-vue :animation="src.animation">
 <a>
 <img :src="require('../../../assets/images/masonry/'+src.image)" alt="Image description" class="img-thumbnail" />
 </a>
 </aos-vue>

</figure>
<vue-easy-lightbox
:visible="visible"
:imgs="lightBoxImages" 
@hide="handleHide">
</vue-easy-lightbox>

 import aosExample from "@/mixins/aosExample";
export default {
   mixins: [aosExample],
   methods: {
    showImg (index) {
      this.index = index
      this.visible = true
    },
    handleHide () {
      this.visible = false
    },
  },
  mounted(){
      this.imgs.forEach(item=>{
          this.lightBoxImages.push(require('@/assets/images/masonry/'+item.image))
          this.lightBoxTitle.push(item.title)
      })
  }
};

const aosExample = {
  
  data(){
      return{
          lightBoxImages:[],
          lightBoxTitle:[],
          visible: false,
        imgs: [
       { image:'1.jpg', animation:"fade-down"},
        {image:'2.jpg', animation:"zoom-out-down"},
        { image:'3.jpg', animation:"flip-down"},
        {image:'4.jpg',animation:"fade-up" },
        {image:'5.jpg',animation:"flip-down" },
        { image:'6.jpg', animation:"fade-up" },
        { image:'7.jpg', animation:"flip-down" },
        { image:'8.jpg', animation:"fade-up"},
        { image:'9.jpg', animation:"flip-down" },
        { image:'10.jpg', animation:"fade-up" },
        { image:'11.jpg', animation:"flip-down" },
        { image:'12.jpg', animation:"fade-up" },
        { image:'14.jpg', animation:"flip-down" },
        { image:'15.jpg', animation:"flip-left" },
        { image:'13.jpg', animation:"flip-down" },
         { image:'4.jpg', animation:"zoom-out" },
         { image:'5.jpg', animation:"flip-right" },
         { image:'6.jpg', animation:"zoom-out" },
         { image:'7.jpg', animation:"zoom-out-up" },
         { image:'8.jpg', animation:"zoom-out-down" },
         { image:'9.jpg', animation:"flip-down" },
         { image:'10.jpg', animation:"slide-up" },
         { image:'9.jpg', animation:"flip-down" },
         { image:'10.jpg', animation:"fade-up" },
         { image:'11.jpg', animation:"flip-down" },
         { image:'12.jpg', animation:"fade-up" },
         { image:'14.jpg', animation:"flip-down" },
         { image:'15.jpg', animation:"flip-left" },
         { image:'13.jpg', animation:"flip-down" },
         { image:'4.jpg', animation:"zoom-out" },
         { image:'5.jpg', animation:"flip-right" },
         { image:'6.jpg', animation:"zoom-out" },
         { image:'7.jpg', animation:"zoom-out-up" }
    ]
      }
  },
}

export default aosExample