Gridsome: Lottie animation example

Add package:

yarn add vue-lottie --dev

Create folders:

mkdir src/components/atoms/lottie && mkdir src/components/atoms/lottie/json

Create component:

    <template>
    <div class="w-full">
    <lottie 
        :options="defaultOptions" 
        :height="400"
        :width="auto" 
        v-on:animCreated="handleAnimation"/>
    <div>
        <p>Speed: x{{animationSpeed}}</p>
        	<input 
            type="range" 
            value="1" 
            min="0" 
            max="3" 
            step="0.5"                    
            v-on:change="onSpeedChange" 
            v-model="animationSpeed">         
            </div>         
            <button v-on:click="stop">stop</button>         
            <button v-on:click="pause">pause</button>         
            <button v-on:click="play">play</button>
    </div> 
    </template>

    <script>
    import Lottie from 'vue-lottie'
    import Cat404 from '@/components/atoms/lottie/json/Cat404.json'
    export default {
    components: {
    	'lottie': Lottie     
    },     
    data() {       
    return {         
    	defaultOptions: {
        animationData: Cat404
        },         
        animationSpeed: 1       
        }     
        },    
        methods: {       
        handleAnimation: 
        	function (anim) {         
        	this.anim = anim;       
            },         
            stop: function () {         
            	this.anim.stop();       
            },         
            play: function () {         
            	this.anim.play();       
            },        
            pause: function () {         
            	this.anim.pause();       
            },        
            onSpeedChange: function () {         
            	this.anim.setSpeed(this.animationSpeed);       
            }     
          }   
        }
    </script>
 <template