[Vue] 🎷 Lottie 사용법

▷ Lottie

JSON 형식으로 애니메이션을 저장하여 비교적 파일 크기가 작은 Lottie.
Lottie에서 원하는 파일을 다운로드 받아 사용할 수 있다.
받아온 Lottie 파일을 미리 플레이해 볼 수 있는 곳

🎷 설치

# 설치
npm install vue3-lottie@latest --save
# yarn add vue3-lottie@latest
# pnpm add vue3-lottie@latest

🎷 Vue3에서 Lottie 설정하기

Usage with Vue 3
Usage with Nuxt 3

/* main.js */
import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'

createApp(App)
  .use(Vue3Lottie, { name: 'LottieAnimation' })
  .mount('#app')

/* components.d.ts */
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    LottieAnimation: typeof import('vue3-lottie')['Vue3Lottie']
  }
}

🎷 Lottie 사용하기

<script setup lang="ts">
import Lottie from 'vue-lottie';
import listLoadingJson from 'src/assets/json/list_loading.json';
</script>

<template>
<Vue3Lottie
  :animationData="listLoadingJson"
  :height="200"
  :width="200"
/>
</template>

👉 vue3 Lottie
👉 lottie-web으로 Lottie에 다양한 옵션 추가하기