Vue Lottie Animation Wrapper (Vue 2)

0.2.1 · abandoned · verified Tue Apr 21

vue-lottie is a Vue 2 component designed to display Lottie animations, acting as a wrapper for the `bodymovin.js` library (now known as `lottie-web`). The package, currently at version `0.2.1`, was last published approximately eight years ago, indicating it is no longer actively maintained. It primarily supports Vue 2.x applications and leverages the Lottie animation format for creating lightweight, scalable vector animations exported from Adobe After Effects. While it provides basic functionality for playing, pausing, and controlling animation speed, its age means it lacks support for modern Vue 3 applications and the latest features or optimizations of `lottie-web`. Developers seeking Lottie integration in contemporary Vue projects should consider actively maintained alternatives like `vue3-lottie` or `lottie-web-vue` which offer Vue 3 and TypeScript support. The package's key differentiator was its early integration of Lottie with Vue 2, providing a declarative component interface for simple animation playback.

Common errors

```
[Vue warn]: Failed to resolve component: lottie
```
cause The Lottie component was not correctly registered with the Vue application or the parent component where it is being used.

fix Ensure `Lottie` is imported and listed in the `components` option of your Vue component, e.g., `components: { 'lottie': Lottie }`. Alternatively, register it globally via `Vue.component('lottie', Lottie);` in your main application entry file.
```
Error: [lottie] Animation data is required.
```
cause The `animationData` option within the `options` prop is either missing, `null`, or an invalid Lottie JSON object.

fix Verify that your `pinjump.json` (or equivalent) file is correctly imported and that the `animationData` property in your `defaultOptions` object holds a valid JSON animation data object.
```
TypeError: Cannot read properties of undefined (reading 'play')
```
cause Methods like `play()`, `stop()`, or `pause()` are being called on `this.anim` before the Lottie animation instance has been created and assigned to `this.anim` via the `animCreated` event.

fix Ensure that `handleAnimation` has been called and `this.anim` has been populated before attempting to call any Lottie animation methods. Add null/undefined checks before calling methods on `this.anim`.

Warnings

breaking This package is explicitly designed for Vue 2.x and is not compatible with Vue 3. Using it in a Vue 3 project will lead to runtime errors due to fundamental API differences.
Fix: For Vue 3 projects, use modern alternatives like `vue3-lottie` or `lottie-web-vue`, which are actively maintained and built for Vue 3.
deprecated The `vue-lottie` package has not been updated in approximately eight years and is considered abandoned. It will not receive bug fixes, security updates, or new features.
Fix: Migrate to actively maintained Lottie component libraries for Vue, such as `vue3-lottie` (for Vue 3) or `lottie-web-vue`.
gotcha The package wraps `bodymovin.js`, which is the older name for `lottie-web`. The underlying Lottie API might be outdated compared to the latest `lottie-web` versions, potentially leading to missing features or compatibility issues with newer Lottie JSON files.
Fix: Be aware that animations created with very recent After Effects plugins might not render correctly. Test thoroughly. Consider newer wrappers that utilize the latest `lottie-web` library.
gotcha The example import path for the `Lottie` component in the README (`import Lottie from './lottie.vue';`) is relative and assumes the component is in the local project. When installed via npm, the correct import is directly from the package name (`import Lottie from 'vue-lottie';`).
Fix: Always use `import Lottie from 'vue-lottie';` when importing the component after installing it via npm.

Install

npm install vue-lottie npm
yarn add vue-lottie yarn
pnpm add vue-lottie pnpm

Imports

Lottie
wrong:
```
import Lottie from './lottie.vue';
```
correct:
```
import Lottie from 'vue-lottie';
```
While the README example shows a local path, for an npm installed package, the direct import from 'vue-lottie' is correct.
animationData
```
import * as animationData from '@/assets/your-animation.json';
```
Lottie animations are JSON files. Using an alias like '@/' is common in Vue CLI projects for assets. Ensure the path is correct for your project structure.

Quickstart

This quickstart demonstrates how to import and register the Lottie component locally, load animation JSON data, and control playback (play, pause, stop, speed) using component methods.

<template>
    <div id="app">
        <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
        <div>
            <p>Speed: x{{animationSpeed}}</p>
            <input type="range" value="1" min="0" max="3" step="0.5"
                   v-on:change="onSpeedChange" v-model="animationSpeed">
        </div>
        <button v-on:click="stop">stop</button>
        <button v-on:click="pause">pause</button>
        <button v-on:click="play">play</button>
    </div>
</template>

<script>
  import Lottie from 'vue-lottie'; // Corrected import for npm package
  import * as animationData from './assets/pinjump.json'; // Ensure this path is correct for your project

  export default {
    name: 'app',
    components: {
      'lottie': Lottie
    },
    data() {
      return {
        defaultOptions: {animationData: animationData},
        animationSpeed: 1,
        anim: null // Initialize anim to null
      }
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      },

      stop: function () {
        if (this.anim) this.anim.stop();
      },

      play: function () {
        if (this.anim) this.anim.play();
      },

      pause: function () {
        if (this.anim) this.anim.pause();
      },

      onSpeedChange: function () {
        if (this.anim) this.anim.setSpeed(this.animationSpeed);
      }
    }
  }
</script>

view raw JSON →