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

import treeMixin from "@/mixins/commen/treeMixin"
 export default {
      mixins:[treeMixin],
};

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

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

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

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

};

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

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

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],
    };
  },
}

const imageMixin = {
    methods: {
        getImgUrl(path) {
          return require('@/assets/images/'+path);
        },
    },
      
  }   
export default imageMixin

{
    "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"}
],
}

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

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

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

const imageMixin = {
methods: {
    getImgUrl(path) {
      return require('@/assets/images/'+path);
    },
},
  
}   
export default imageMixin

{
"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" }
    ]
}

import masonry from "../../data/masonry.json"
const state = {
    aos : masonry.aos
};

export default {
    namespaced: true,
    state,
}