vue3-lottie

Vue 3 Lottie

vue3-lottie was created to help developers add Lottie animations to their Vue 3 applications. In my search for a simple way to add Lottie animations to my Vue application I found a suprising lack of maintained solutions. vue3-lottie is a vue wrapper around the lottie-player library with a few additional features.

Demos

View the live demos here: https://vue3-lottie.vercel.app/examples.html

Upgrade to v3.x

If you are using version 1.x or v2.x of vue3-lottie you should upgrade to version 3.x. You can do this by running the Installation command below. There are some new imports so take a look at the new documentation.

Installation

If you are using npm:

npm install vue3-lottie@latest --save

If you are using yarn:

yarn add vue3-lottie@latest

Installation and Usage

Vue 3

• You can install vue3-lottie over yarn or npm. lottie-web is a dependency of vue3-lottie and should be automatically installed when you install vue3-lottie.

yarn add vue3-lottie@latest

npm install vue3-lottie@latest --save

• Register the component in your Vue 3 application.

The most common use case is to register the component globally.

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

import 'vue3-lottie/dist/style.css'

createApp(App).use(Vue3Lottie).mount('#app')

Alternatively you can import the component locally.

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

<script>
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'

const AstronautJSON = require('./astronaut.json')

export default {
  components: {
    Vue3Lottie,
  },
  data() {
    return {
      AstronautJSON,
    }
  },
}
</script>

Nuxt 3

• You can install vue3-lottie over yarn or npm. lottie-web is a dependency of vue3-lottie and should be automatically installed when you install vue3-lottie.

yarn add vue3-lottie@latest

npm install vue3-lottie@latest --save

• Create a folder called plugins at the root of your project.
• Create a file named vue3-lottie.client.js inside the plugins directory.
• Add the following code to the vue3-lottie.client.js file.

import { Vue3Lottie } from 'vue3-lottie'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Lottie)
})

• Import the css file required by the component into your app.vue file.

import 'vue3-lottie/dist/style.css'

Props and options

More detailed explanations are provided in the documentation.

Prop	Type	Default Value	Description
animationData	Object	{}	The lottie animation data provided as a JSON object
animationLink	String	''	A URL link to the Lottie animation data (eg: Lottie Animation URL on lottiefiles.com)
width	Number or String	"100%"	Width of the lottie animation container (Numbers correspond to pixel values)
height	Number or String	"100%"	Height of the lottie animation container (Numbers correspond to pixel values)
speed	Number	"1"	Speed of the lottie animation
direction	String	"forward"	Animation play direction
loop	Number or Boolean	true	The number of instances that the lottie animation should run (true is infinite)
autoPlay	Boolean	true	Start animation on component load
delay	Number	0	Delay the animation play state by some milliseconds
pauseAnimation	Boolean	false	Prop to pass reactive variables so that you can control animation pause and play
pauseOnHover	Boolean	false	Whether to pause the animation on hover
playOnHover	Boolean	false	Whether to play the animation when you hover
backgroundColor	String	transparent	Background color of the container
showControls	Boolean	false	Show the lottie-player controls

Events

A few events are emitted from the component. Look at the Demos for examples.

• onLoad
  • This event is fired when your animation data is loaded.
• onReady
  • This event is fired when your animation data is loaded and player is ready.
• onError
  • This event is fired when an animation source cannot be parsed, fails to load or has format errors.
• onPlay
  • This event is fired when the animation starts playing.
• onPause
  • This event is fired when the animation is paused.
• onStop
  • This event is fired when the animation is stopped.
• onComplete
  • If your animation has a finite amount of loops you can use this event to know when the animation has completed.
• onLoopComplete
  • If your animation has a finite amount of loops you can use this event to know when the animation has completed a loop.
• onEnterFrame
  • This event is fired every frame of the animation. There will be 60 events fired per second if your lottie animation runs at 60fps.

Methods

You can control the animation with the following methods. These methods can be called by assigning a ref value to the vue3-lottie component. Look at the Demos for examples.

• play
  • Plays the animation
• pause
  • Pauses the animation
• stop
  • Stops the animation. This will also reset the animation to the first frame. Look at the demo for some examples.
• destroy
  • You can call this method to destroy the animation. It will remove the animation from the DOM.
• setSpeed(speed)
  • You can call this method to change the speed of your animation.
• setDirection(direction)
  • You can call this method to change the direction of your animation.
• getDuration()
  • You can call this method to get the total number of frames of your animation.

Credits

A big thank you goes to @reslear for adding Typescript support to this library. Go check out his profile and give him a follow!