enter image description hereI’m working on a Nuxt project where I want to display Lottie animations within a Vue component. I’ve set up everything according to the documentation, but for some reason, the animations are not rendering.

Despite these setups, the animations are not displaying. I have checked the browser’s console for errors, but nothing related to Lottie appears.

Could anyone please help me identify what I might be missing or doing wrong?

Thank you in advance!

1. Checked the JSON file path: Ensured that the path to the animation JSON file is correct.
2. Console logging: Added console.log statements to verify that the services data is loaded correctly.
3. Created a plugin: Set up a plugin (vue3-lottie.js) to register the vue3-lottie component properly.
4. Included necessary CSS: Made sure to import vue3-lottie CSS in the plugin.

I expected the Lottie animations to display correctly in the component, but currently, they are not rendering, and there are no errors in the console related to Lottie.

Here is the relevant part of my Vue component:

<ul>
              <li v-for="service in services" :key="service.title" class="service-item">
                <div class="edge_card card_effect">
                  <div class="card_content">
                    <div class="title">
                      <span v-if="service.animation">
                        <LottieAnimation :animationData="service.animation" :width="50" :height="50" />
                      </span>
                      <p>{{ service.title }}</p>
                    </div>
                    <div class="content">
                      <span>{{ service.description }}</span>
                      <div class="card_cta">
                        <NuxtLink to="/contactUs">Learn More</NuxtLink>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>

<script>
import { defineComponent } from 'vue';
import LottieAnimation from 'vue3-lottie';
import animation1 from '~/assets/images/animations/Isolation_Mode.json';

export default defineComponent({
  components: {
    LottieAnimation
  },
  data() {
    return {
      services: [
        {
          title: 'Information Security',
          description: 'Information security services & solutions with higher reliability experience fortified security like never before with NETSOL.',
          animation: animation1
        },
        // Add other services here
      ]
    };
  },
  mounted() {
    console.log('Services:', this.services);
  }
});
</script>