Working Lottie VueJS Example (vue-lottie library), Working image loading

animation.vue

<template>
    <div id="header">
        <div class="header-animation">
            <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
        </div>
    </div>
</template>

<script>
import Lottie from 'vue-lottie';
import * as animationData from '../../public/animations/HomepageHeader/HomepageHeader.json';

// Had to store my animation Json and images inside of the "public" folder
// Images weren't loading for me, so I'm using the below method to update their location or 'u' value correctly
var publicPath = process.env.BASE_URL;
animationData.assets.forEach(item => { item.u = publicPath + 'animations/HomepageHeader/images/'; });

export default {
    name: "HomepageHeader",
    components: {
      'lottie': Lottie
    },
    data() {
        return {
            defaultOptions: {animationData: animationData.default},
            animationSpeed: 1,
            anim: null
        }
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      }
    }
}
</script>

<style scoped>
#header {
    background: linear-gradient(180deg, #2D2C4E 0%, #475989 28.12%, #475989 99.99%, rgba(71, 89, 137, 0) 100%);
    min-height:450px;
    padding-top:55px;
    display: block;
}
.header-animation{
    /* make it closer to the search button */
    margin-top:-20px;
}
</style>

Thanks a lot! Line 16 was just what I've been looking for in the past few weeks 😭