lottie-player-vue
v0.0.16
Published
LottieFiles animations, in Vue!
Downloads
1,414
Maintainers
Readme
Lottie Player Vue
A vue wrapper for @lottiefiles/lottie-player. It makes it simple to include beautiful animations in your web apps using https://lottiefiles.com.
It is published on npm at: https://www.npmjs.com/package/lottie-player-vue
Installation
Install lottie-player-vue:
npm install --save lottie-player-vue
Include in it either globally (in main.js
) or a Vue component.
Global:
// main.js
// ...
import LottiePlayer from 'lottie-player-vue';
Vue.use(LottiePlayer);
// ...
Component:
// MyComponent.vue
// ...
import LottiePlayer from 'lottie-player-vue';
export default {
components: {
LottiePlayer
},
// ...
And then add it to your template:
<div>
<lottie-player :src="animationJSON"/>
</div>
Properties
Customisation of the tree is configured with the following properties:
| Name | Default | Description |
|---------|--------------|------------------------------------------------------------------------------------------|
| src | required | JSON animation, from http://lottiefiles.com |
| options | {}
| documented below / https://www.npmjs.com/package/@lottiefiles/lottie-player#properties |
The options object matches the properties found in the offical lottiefiles documentation exactly with the addition that we also support the width
and height
keys. These will be mapped directly to the width
and height
properties of the animation HTML element.
e.g.
// options
{
autoplay: true,
speed: 2.5,
width: '100px'
}