Registry / vue-lottie

vue-lottie

library0.2.1jsnpmunverified

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.

npm install vue-lottie

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-LOTTIE

vue-lottie

javascriptv0.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Lottie

✓ import Lottie from 'vue-lottie';

✗ import Lottie from './lottie.vue';

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.

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>

Debug

Known issues

breakingThis 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.

affects: All versions

deprecatedThe `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`.

affects: All versions

gotchaThe 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.

affects: All versions

gotchaThe 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.

affects: All versions

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: lottie

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.

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

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`.

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

vuerequiredPeer dependency, specifies compatibility with Vue 2.x.

lottie-webrequiredCore animation rendering engine, previously `bodymovin.js`, which this package wraps.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/chenqingspring/vue-lottie ↗

packagehttps://www.npmjs.com/package/vue-lottie ↗