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 ton for the example

You're welcome :D

Just wanted to add if anyone is having trouble deploying this to heroku - error such as:

This relative module was not found:
       
       * ../../public/animations/HomepageHeader/data.json in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ResultsEnterToGetStartedIllustration.vue?vue&type=script&lang=js&
 ERROR  Build failed with errors.

it's being caused by how the data is being pushed to github, often, the animations aren't uploaded for whatever reason ... you can see this for yourself if you browse your code on Github. Only one of my animations inside of the animations folder actually made it in.

I was able to address this by setting generous permissions to the missing folder with the animation in it eg.

// inside of animations folder
sudo chmod -R 777 HomepageHeader/
sudo chmod -R +x HomepageHeader/
//   note: these are very generous permissions and a security concern, so, please find the right settings for you.

/// then had to commit it like normal to github
//    make sure the folder for the animation is there and is now "discovered" by git
git status
git add .
git commit -m "adding in missing animations folder"
git push origin master
git push heroku master

once git identifies the missing folder and you've pushed the changes up, then you will notice heroku will build without any further deploy errors.

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