Examples Some examples of how to use the library are shown below. Using the animationData prop You can pass in the JSON object directly to the animationData prop. Your animation will load up faster using this method. < template > < Vue3Lottie :animation-data = "SkullJSON" :height = "200" :width = "200" /> < script setup > import SkullJSON from './lotties/skull.json' Using the animationLink prop You can also pass in a valid URL link to the lottie file JSON object instead of referring to a local file. The JSON file containing the animation data must be hosted on a server that supports CORS. < template > < Vue3Lottie animation-link = "https://assets2.lottiefiles.com/packages/lf20_GbabwrUY2k.json" :height = "200" :width = "200" /> Passing in width and height props You can also pass in any valid css unit here. If you pass in a number, It will be inferenced as a pixel value. Some valid examples include 50% , 10em , etc. < template > < Vue3Lottie animation-link = "https://assets7.lottiefiles.com/packages/lf20_Yc2PU8DdfX.json" :height = "300" :width = "300" /> Using the loop prop You can pass in the loop prop to make the animation loop infinitely. You can use this prop if you are using lotties for success or error animations. Set the loop prop to 1 if you want the animation to play only once. < template > < Vue3Lottie animation-link = "https://assets2.lottiefiles.com/packages/lf20_GbabwrUY2k.json" :height = "200" :width = "200" :loop = "3" /> Alternate the animation direction using the direction prop You can set the direction to alternate to reverse the animation at the end of a loop. < template > < Vue3Lottie animation-link = "https://assets10.lottiefiles.com/packages/lf20_K0864uP6eC.json" :height = "200" :width = "200" direction = "alternate" /> Using the scale prop If you have an animation that is too big or too small, you can use the scale prop to scale the animation. This is only on the internal canvas and does not affect the size of the container. < template > < Vue3Lottie animation-link = "https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json" :height = "200" :width = "200" /> < Vue3Lottie animation-link = "https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json" :height = "200" :width = "200" :scale = "2" /> < Vue3Lottie animation-link = "https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json" :height = "200" :width = "200" :scale = "3" /> Using the pauseOnHover prop If you set pauseOnHover to true, the animation will pause when you hover over the animation. < template > < Vue3Lottie animation-link = "https://assets7.lottiefiles.com/packages/lf20_eOLhtkf7AY.json" :height = "200" :width = "200" :pause-on-hover = "true" /> Using the playOnHover prop The lottie animation will play when you hover over the animation. Moving the mouse away will pause the animation at its current frame. Hovering over the container will play the animation from where it left off. < template > < Vue3Lottie animation-link = "https://assets7.lottiefiles.com/packages/lf20_bNKaWpBPt6.json" :height = "200" :width = "200" :play-on-hover = "true" /> Using reactive props to control the animation You can also use the pauseAnimation prop to control the play and pause state of the lottie animation. < template > < Vue3Lottie animation-link = "https://assets10.lottiefiles.com/packages/lf20_swnrn2oy.json" :height = "200" :width = "200" :pause-animation = "playState" /> < button @click = "playState = !playState" > Play/Pause Animation < script setup > import { ref } from 'vue' const playState = ref ( true ) Using custom assets You can use custom assets in your lottie animations. You can use the assetsPath prop to specify the path to the assets folder. This is useful if you want to host your assets on a CDN. < template > < Vue3Lottie animation-link = "https://assets1.lottiefiles.com/packages/lf20_xvz0dpbn.json" assets-path = "https://source.unsplash.com/user/wsanter" :height = "200" :width = "200" /> Listening to events vue3-lottie has support for events to be emitted from the animation. < template > < Vue3Lottie animation-link = "https://assets4.lottiefiles.com/datafiles/i0DrGl1AyhF4rvhqpBUbia6zUEekgKoxRociBzZy/stopwatch.json" :height = "200" :width = "200" @on-loop-complete = "completed++" /> < span > This animation has completed {{ completed }} times. < script setup > import { ref } from 'vue' const completed = ref ( 0 ) Controlling the animation You can use the animation ref to control the animation. You can use the play , pause , stop and setSpeed methods to control the animation. Add a ref to the vue3-lottie component and then call the methods you want. < template > < Vue3Lottie ref = "lottieAnimation" animation-link = "https://assets2.lottiefiles.com/private_files/lf30_vcwnens3.json" :height = "200" :width = "200" /> < button @click = "play" >Play < button @click = "pause" >Pause < button @click = "stop" >Stop < button @click = "toggleDirection" >Reverse < button @click = "getFrameCount" ># of frames < button @click = "getTimeCount" ># of seconds < script setup > import { ref } from 'vue' const lottieAnimation = ref ( null ) const direction = ref ( 'forward' ) const play = () => { lottieAnimation.value. play () } const pause = () => { lottieAnimation.value. pause () } const stop = () => { lottieAnimation.value. stop () } const toggleDirection = () => { if (direction.value === 'forward' ) { pause () lottieAnimation.value. setDirection ( 'reverse' ) play () direction.value = 'reverse' } else { pause () lottieAnimation.value. setDirection ( 'forward' ) play () direction.value = 'forward' } } const getFrameCount = () => { alert ( `This animation has ${ lottieAnimation . value . getDuration ( true ) } frames` ) } const getTimeCount = () => { alert ( `This animation takes ${ lottieAnimation . value . getDuration ( false ) } seconds` , ) } Disclaimer All the lotties in this page are from lottiefiles.com . html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}

Vue 3 Lottie

What's included

Extended API

Typescript Support

Easy to use