Create Lottie Animations In Vue Apps – vue3-lottie

vue3-lottie is a Vue component that allows you to create customizable lottie animations in applications.

How to use it:

1. Import and register the vue3-lottie.

// globally
import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
createApp(App).use(Vue3Lottie).mount('#app')

// locally
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
export default {
  components: {
    Vue3Lottie,
  },
}

2. Add the Vue3Lottie component to your app and define the animation data as follows:

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

import animationJSON from './lotties/animation.json'
export default {
  components: {
    Vue3Lottie,
  },
  data() {
    return {
      animationJSON,
    }
  },
}

3. Available component props.

animationData: {
  type: Object as PropType<LottieProps['animationData']>,
  default: () => ({}),
},
animationLink: {
  type: String as PropType<LottieProps['animationLink']>,
  default: '',
},
loop: {
  type: [Boolean, Number] as PropType<LottieProps['loop']>,
  default: true,
},
autoPlay: {
  type: Boolean as PropType<LottieProps['autoPlay']>,
  default: true,
},
width: {
  type: [Number, String] as PropType<LottieProps['width']>,
  default: '100%',
},
height: {
  type: [Number, String] as PropType<LottieProps['height']>,
  default: '100%',
},
speed: {
  type: Number as PropType<LottieProps['speed']>,
  default: 1,
},
delay: {
  type: Number as PropType<LottieProps['delay']>,
  default: 0,
},
direction: {
  type: String as PropType<LottieProps['direction']>,
  default: 'forward',
},
pauseOnHover: {
  type: Boolean as PropType<LottieProps['pauseOnHover']>,
  default: false,
},
playOnHover: {
  type: Boolean as PropType<LottieProps['playOnHover']>,
  default: false,
},
backgroundColor: {
  type: String as PropType<LottieProps['backgroundColor']>,
  default: 'transparent',
},
pauseAnimation: {
  type: Boolean as PropType<LottieProps['pauseAnimation']>,
  default: false,
},

4. API methods.

// play
this.$refs.lottieContainer.play()

// pause
this.$refs.lottieContainer.pause()

// stop
this.$refs.lottieContainer.stop()

// destroy
this.$refs.lottieContainer.destroy()

// set speed
this.$refs.lottieContainer.setSpeed(2)

// 'forward' or 'reverse'
this.$refs.lottieContainer.setDirection('forward')

// get duration
this.$refs.lottieContainer.getDuration(true)

// go to a specific frame
this.$refs.lottieContainer.goToAndStop(10, true)
this.$refs.lottieContainer.goToAndPlay(5, true)

// play segments
this.$refs.lottieContainer.playSegments([10, 20], true)

// set sub frame
this.$refs.lottieContainer.setSubFrame(true)

5. Events.

• @onComplete
• @onLoopComplete
• @onEnterFrame
• @onSegmentStart

Preview:

Changelog:

08/25/2023

• v3.1.0

Download Details:

Author: megasanjay

Live Demo: https://vue3-lottie.vercel.app/examples.html

Download Link: https://github.com/megasanjay/vue3-lottie/archive/refs/heads/main.zip

Official Website: https://github.com/megasanjay/vue3-lottie

Install & Download: