[Nuxtjs]Lottie json 적용하기

1. 설치

yarn add vue-lottie@0.2.1

 

2. 컴포넌트 작성

<template>
   <lottie
          :width="270"
          :height="230"
          :options="tearlottieOptions"
          class="schedule-lottie"
          @animCreated="handleAnimation"
        />
</template>


<script>
import Lottie from 'vue-lottie/src/lottie.vue';
import * as tearChildsLottie from 'assets/img/tear-child-lottie.json';
import * as noTearChildsLottie from 'assets/img/no-tear-child-lottie.json';
export default {
  name: '오예~',
  components: {
    Lottie,
  },
  data() {
    return {
      tearlottieOptions: {
        animationData: tearChildsLottie.default,
        loop: false,
      },
      noTearlottieOptions: {
        animationData: noTearChildsLottie.default,
        loop: false,
      },
    }
  },
  methods: {
    handleAnimation(anim) {
      this.anim = anim;
    },
  }
}