Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
vue3-lottie
Advanced tools
[![npm](https://img.shields.io/npm/v/vue3-lottie)](https://www.npmjs.com/package/vue3-lottie) [![Downloads](https://img.shields.io/npm/dt/vue3-lottie)](https://www.npmjs.com/package/vue3-lottie) [![Stars](https://img.shields.io/github/stars/megasanjay/vue
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-web
library with a few additional features.
View the live demos here: https://vue3-lottie.vercel.app
If you are using npm:
npm install vue3-lottie
If you are using yarn:
yarn add vue3-lottie
The most common use case is to register the component globally.
// main.js
import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'
createApp(App).use(Vue3Lottie).mount('#app')
Alternatively you can also import the component locally.
import Vue3Lottie from 'vue3-lottie'
export default {
components: {
Vue3Lottie,
},
}
You can then use the component in your template
<template>
<Vue3Lottie :animationData="DogJSON" :height="200" :width="200" />
</template>
<script>
import Vue3Lottie from 'vue3-lottie'
import DogJSON from './lotties/dog.json'
export default {
components: {
Vue3Lottie,
},
data() {
return {
DogJSON,
}
},
}
</script>
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 |
rendererSettings | Object | {} | Options for if you want to use an existing canvas to draw (can be ignored on most cases) |
A few events are emitted from the component. Look at the Demos for examples.
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.
FAQs
Add Lottie animations to your Vue 3 or Nuxt 3 application.
The npm package vue3-lottie receives a total of 41,859 weekly downloads. As such, vue3-lottie popularity was classified as popular.
We found that vue3-lottie demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.