Lottie in Nuxt3

Once upon a time, as i wanted to use the lottie in nuxt3 i had few problems and unknown errors so i said lets make a small docs for others so maybe it would help them to save time and all . so its easier for them bcz i was looking for this docs and never found it in any where

Start a Project

so if you want to use the previous project or you wanna start a new one ... if you have already then skip this and if you dont , you can use this command to start a new Project.

npx create-nuxt-app my-project

Preparing the Project

You have to make a few files

• first of all install the lottie Package npm install lottie-web
• Make a new file in Component Folder and name it Lottie.vue '@/components/Lottie.vue'
• Make a folder in assets folder and name it animated '@/assets/animated'
• Download your lottie file from the site and copy it to th animated file you just made '@/assets/animated/animation.json'

Lottie.vue

Copy and paste it to the Lottie.vue

        
          <template>
            <div :style="style" ref="animationContainer"></div>
          </template>
          
          <script>
          import lottie from 'lottie-web';
          
          export default {
            props: {
              options: {
                type: Object,
                required: true
              },
              height: Number,
              width: Number
            },
          
            data() {
              return {
                style: {
                  width: this.width ? `${this.width}px` : '100%',
                  height: this.height ? `${this.height}px` : '100%',
                  overflow: 'hidden',
                  margin: '0 auto'
                }
              };
            },
          
            mounted() {
              lottie.loadAnimation({
                container: this.$refs.animationContainer,
                renderer: 'svg',
                loop: true,
                autoplay: true,
                animationData: this.options.animationData,
                rendererSettings: this.options.rendererSettings
              });
            }
          }
          </
          script>
        
      

after adding this to the Lottie.vue file in the Components folder you can use it in your project by calling the Compoponent the page you want ... as this example is showing ....for example you want to show it in your main page index.vue

        <template>
    <div>
      <Lottie :options="lottieOptions" :width="500" :height="500" />
    </div>
       </template>

  <script>
     import Lottie from "@/components/Lottie.vue";
     import animationData from "~/assets/animated/animation.json";

   export default {
      components: {
      Lottie,
     },
     data() {
       return {
         lottieOptions: {
         animationData: animationData,
         rendererSettings: {
          preserveAspectRatio: "xMidYMid slice",
        },
        },
      };
     },
     }; 
     </
       script>
        
      

after adding and making these Changes you are ready to go and you wont have any problem