Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
vue3-lottie
Advanced tools
Readme
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@latest --save
If you are using yarn:
yarn add vue3-lottie@latest
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 also import the component locally.
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
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 'vue3-lottie/dist/style.css'
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.
A big thank you goes to @reslear for adding Typescript support to this library. Go check out his profile and give him a follow!
FAQs
Add Lottie animations to your Vue 3 or Nuxt 3 application.
The npm package vue3-lottie receives a total of 35,784 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 1 open source maintainer 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
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.