dev-audioprocessing/layouts/default.vue

<template>
  <div>
<div class="">

  <client-only>
    <Vue3Lottie
        v-if="show"
        style="position: fixed;background-color: white;z-index: 99999"
        :animation-data="anim"
        :loop="true"
        width="100%"
        height="100%"
    />
  </client-only>

  <slot/>


</div>
  </div>

</template>

<script>
import * as animationData from "~/assets/animation.json";
import 'vue3-lottie/dist/style.css'
export default {
  data() {
    return {
      show:true,
      anim: animationData.default, // for saving the reference to the animation
      lottieOptions: { animationData: animationData.default }
    };
  },

  mounted() {
    this.show=false;
  }
}
</script>
<script setup>

useHead({
  title:'MindBoost',
  meta:[
    {
      name:"viewport",
      content:"width=device-width, initial-scale=1.0, viewport-fit=cover"
    }
  ],
  link:[
    {
      href:'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css',
      rel:'stylesheet',
    },
    {
      href: 'favicon.svg',
      rel:"icon",
      type:"image/x-icon"
    }
    // { rel: 'stylesheet', href: '../assets/css/style.css' },
  ],
  script:[
    {
      src:'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js',
    },
    {
      src:'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js',
    }
  ]

})

</script>

<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css";
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.2s;
}
.slide-left-enter-from {
  opacity: 0;
  transform: translate(50px, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-enter-from {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate(50px, 0);
}
</style>