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'
}