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