JSON ํ์์ผ๋ก ์ ๋๋ฉ์ด์
์ ์ ์ฅํ์ฌ ๋น๊ต์ ํ์ผ ํฌ๊ธฐ๊ฐ ์์ Lottie.
Lottie์์ ์ํ๋ ํ์ผ์ ๋ค์ด๋ก๋ ๋ฐ์ ์ฌ์ฉํ ์ ์๋ค.
๋ฐ์์จ Lottie ํ์ผ์ ๋ฏธ๋ฆฌ ํ๋ ์ดํด ๋ณผ ์ ์๋ ๊ณณ
# ์ค์น
npm install vue3-lottie@latest --save
# yarn add vue3-lottie@latest
# pnpm add vue3-lottie@latest
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']
}
}
<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์ ๋ค์ํ ์ต์
์ถ๊ฐํ๊ธฐ