{"id":15275,"library":"vue-lottie","title":"Vue Lottie Animation Wrapper (Vue 2)","description":"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.","status":"abandoned","version":"0.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/chenqingspring/vue-lottie","tags":["javascript","vue","lottie","vue-component","vue-animation"],"install":[{"cmd":"npm install vue-lottie","lang":"bash","label":"npm"},{"cmd":"yarn add vue-lottie","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-lottie","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, specifies compatibility with Vue 2.x.","package":"vue","optional":false},{"reason":"Core animation rendering engine, previously `bodymovin.js`, which this package wraps.","package":"lottie-web","optional":false}],"imports":[{"note":"While the README example shows a local path, for an npm installed package, the direct import from 'vue-lottie' is correct.","wrong":"import Lottie from './lottie.vue';","symbol":"Lottie","correct":"import Lottie from 'vue-lottie';"},{"note":"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.","symbol":"animationData","correct":"import * as animationData from '@/assets/your-animation.json';"}],"quickstart":{"code":"<template>\n    <div id=\"app\">\n        <lottie :options=\"defaultOptions\" :height=\"400\" :width=\"400\" v-on:animCreated=\"handleAnimation\"/>\n        <div>\n            <p>Speed: x{{animationSpeed}}</p>\n            <input type=\"range\" value=\"1\" min=\"0\" max=\"3\" step=\"0.5\"\n                   v-on:change=\"onSpeedChange\" v-model=\"animationSpeed\">\n        </div>\n        <button v-on:click=\"stop\">stop</button>\n        <button v-on:click=\"pause\">pause</button>\n        <button v-on:click=\"play\">play</button>\n    </div>\n</template>\n\n<script>\n  import Lottie from 'vue-lottie'; // Corrected import for npm package\n  import * as animationData from './assets/pinjump.json'; // Ensure this path is correct for your project\n\n  export default {\n    name: 'app',\n    components: {\n      'lottie': Lottie\n    },\n    data() {\n      return {\n        defaultOptions: {animationData: animationData},\n        animationSpeed: 1,\n        anim: null // Initialize anim to null\n      }\n    },\n    methods: {\n      handleAnimation: function (anim) {\n        this.anim = anim;\n      },\n\n      stop: function () {\n        if (this.anim) this.anim.stop();\n      },\n\n      play: function () {\n        if (this.anim) this.anim.play();\n      },\n\n      pause: function () {\n        if (this.anim) this.anim.pause();\n      },\n\n      onSpeedChange: function () {\n        if (this.anim) this.anim.setSpeed(this.animationSpeed);\n      }\n    }\n  }\n</script>","lang":"javascript","description":"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."},"warnings":[{"fix":"For Vue 3 projects, use modern alternatives like `vue3-lottie` or `lottie-web-vue`, which are actively maintained and built for Vue 3.","message":"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.","severity":"breaking","affected_versions":"All versions"},{"fix":"Migrate to actively maintained Lottie component libraries for Vue, such as `vue3-lottie` (for Vue 3) or `lottie-web-vue`.","message":"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.","severity":"deprecated","affected_versions":"All versions"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Always use `import Lottie from 'vue-lottie';` when importing the component after installing it via npm.","message":"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';`).","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"The Lottie component was not correctly registered with the Vue application or the parent component where it is being used.","error":"[Vue warn]: Failed to resolve component: lottie"},{"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.","cause":"The `animationData` option within the `options` prop is either missing, `null`, or an invalid Lottie JSON object.","error":"Error: [lottie] Animation data is required."},{"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`.","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.","error":"TypeError: Cannot read properties of undefined (reading 'play')"}],"ecosystem":"npm"}