{"id":12629,"library":"vue3-lottie","title":"Lottie Animations for Vue 3","description":"Vue3-lottie is a component library that enables developers to easily integrate Lottie animations into their Vue 3 and Nuxt 3 applications. It wraps `lottie-web` and provides a declarative API through a `<Vue3Lottie>` component, supporting a wide range of Lottie features like autoplay, looping, speed control, and segment playback. The current stable version is 3.3.1, with frequent patch and minor releases addressing bugs, improving types, and adding features. Key differentiators include its strong TypeScript support (enhanced in v3.0.0), seamless integration with the Vue ecosystem, and specific guidance for Nuxt 3. It abstracts away much of the complexity of directly using `lottie-web`, making it accessible for Vue developers. The library is actively maintained, ensuring compatibility with the latest Vue and Nuxt versions.","status":"active","version":"3.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/megasanjay/vue3-lottie","tags":["javascript","vue3","lottie","typescript"],"install":[{"cmd":"npm install vue3-lottie","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-lottie","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-lottie","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the Vue 3 component.","package":"vue","optional":false},{"reason":"Underlying animation engine for rendering Lottie files. Implicitly used by vue3-lottie.","package":"lottie-web","optional":false}],"imports":[{"note":"This is a default export. Importing as a named export will fail.","wrong":"import { Vue3Lottie } from 'vue3-lottie'","symbol":"Vue3Lottie","correct":"import Vue3Lottie from 'vue3-lottie'"},{"note":"For Nuxt 3, it's recommended to register the component globally via a plugin, not `use()`.","wrong":"import Vue3Lottie from 'vue3-lottie';\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(Vue3Lottie);\n});","symbol":"Vue3Lottie (in Nuxt 3)","correct":"import { defineNuxtPlugin } from '#app';\nimport Vue3Lottie from 'vue3-lottie';\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie);\n});"},{"note":"Use `import type` for type-only imports to ensure they are stripped during compilation.","symbol":"Props interface (TypeScript)","correct":"import type { Vue3LottieProps } from 'vue3-lottie'"}],"quickstart":{"code":"<!-- src/App.vue or a component file -->\n<template>\n  <div id=\"app\">\n    <h1>My Lottie Animation</h1>\n    <Vue3Lottie\n      :animationData=\"AnimationData\"\n      :height=\"200\"\n      :width=\"200\"\n      :loop=\"true\"\n      :autoplay=\"true\"\n      :speed=\"1\"\n      :direction=\"direction\"\n      @vnode-mounted=\"handleLottieMount\"\n    />\n    <button @click=\"toggleDirection\">Toggle Direction</button>\n    <p>Current Direction: {{ direction }}</p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\nimport Vue3Lottie from 'vue3-lottie';\nimport AnimationData from './assets/lottie-animation.json'; // Assume you have a Lottie JSON file here\n\nexport default defineComponent({\n  name: 'App',\n  components: {\n    Vue3Lottie,\n  },\n  setup() {\n    const direction = ref(1); // 1 for forward, -1 for backward\n\n    const toggleDirection = () => {\n      direction.value = direction.value === 1 ? -1 : 1;\n    };\n\n    const handleLottieMount = (instance: any) => {\n      console.log('Lottie component mounted:', instance);\n      // You can access the lottie-web instance here if needed\n    };\n\n    return {\n      AnimationData,\n      direction,\n      toggleDirection,\n      handleLottieMount,\n    };\n  },\n});\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>","lang":"typescript","description":"This example demonstrates how to integrate and control a Lottie animation using the `Vue3Lottie` component in a Vue 3 application. It shows basic setup with local animation data, controlling playback direction, and handling component mount events. Remember to replace `./assets/lottie-animation.json` with your actual Lottie JSON file."},"warnings":[{"fix":"Review the official v3 documentation for updated TypeScript usage. Remove explicit imports for `dist/style.css` as it's no longer necessary or provided in the same manner. Ensure you are using the correct component import style (default export).","message":"Version 3.0.0 introduced breaking changes, including enhanced TypeScript support and the removal of the `dist/style.css` import. Projects upgrading from v2.x must adjust their setup.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always use `import Vue3Lottie from 'vue3-lottie'` for importing the main component. Do not use `import { Vue3Lottie } from 'vue3-lottie'`.","message":"The `Vue3Lottie` component is a default export, not a named export. Incorrectly importing it with curly braces will lead to a runtime error.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Create a Nuxt plugin (e.g., `plugins/lottie.client.ts`) and register the component using `nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie);` as demonstrated in the Nuxt 3 import example.","message":"When integrating into Nuxt 3, it's crucial to register `Vue3Lottie` as a global component via a Nuxt plugin. Directly using `nuxtApp.vueApp.use(Vue3Lottie)` will not work as expected.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Ensure that `animationData` is the actual parsed Lottie JSON. For files, `import AnimationData from 'path/to/animation.json'` handles this. If using a URL, pass the URL string to the `animationLink` prop introduced in v3.2.0.","message":"Animation data (the `animationData` prop) must be a parsed JSON object, not a string path to a JSON file. If loading from a URL, use the `animationLink` prop instead.","severity":"gotcha","affected_versions":">=3.2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change the import statement from `import { Vue3Lottie } from 'vue3-lottie'` to `import Vue3Lottie from 'vue3-lottie'`.","cause":"Attempting to import `Vue3Lottie` as a named export when it's a default export.","error":"TypeError: (0 , vue3_lottie__WEBPACK_IMPORTED_MODULE_0__.Vue3Lottie) is not a function"},{"fix":"If in Nuxt 3, ensure you have a client-side plugin registering the component: `nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie);`. In a standard Vue CLI/Vite project, ensure it's imported and declared in the `components` option of your parent component or globally registered.","cause":"The `Vue3Lottie` component was not correctly registered with the Vue application, common in Nuxt 3 or non-global registrations.","error":"Property 'Vue3Lottie' was accessed during render but is not defined on instance."},{"fix":"Import `Vue3Lottie` in your script section (`import Vue3Lottie from 'vue3-lottie';`) and register it in the `components` option of your Vue component: `{ components: { Vue3Lottie } }`.","cause":"The `Vue3Lottie` component is not imported or registered in the component where it's being used.","error":"Error: [Vue warn]: Failed to resolve component: Vue3Lottie"}],"ecosystem":"npm"}