vue3-lottie

library3.3.1jsnpmunverified

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.

web-framework

npm install vue3-lottie

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE3-LOTTIE

vue3-lottie

web-frameworkjavascriptv3.3.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.

Vue3Lottie

✓ import Vue3Lottie from 'vue3-lottie'

✗ import { Vue3Lottie } from 'vue3-lottie'

This is a default export. Importing as a named export will fail.

Vue3Lottie (in Nuxt 3)

✓ import { defineNuxtPlugin } from '#app'; import Vue3Lottie from 'vue3-lottie'; export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie); });

✗ import Vue3Lottie from 'vue3-lottie'; export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(Vue3Lottie); });

For Nuxt 3, it's recommended to register the component globally via a plugin, not `use()`.

Props interface (TypeScript)

✓ import type { Vue3LottieProps } from 'vue3-lottie'

Use `import type` for type-only imports to ensure they are stripped during compilation.

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.

<template> <div id="app"> <h1>My Lottie Animation</h1> <Vue3Lottie :animationData="AnimationData" :height="200" :width="200" :loop="true" :autoplay="true" :speed="1" :direction="direction" @vnode-mounted="handleLottieMount" /> <button @click="toggleDirection">Toggle Direction</button> <p>Current Direction: {{ direction }}</p> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import Vue3Lottie from 'vue3-lottie'; import AnimationData from './assets/lottie-animation.json'; // Assume you have a Lottie JSON file here export default defineComponent({ name: 'App', components: { Vue3Lottie, }, setup() { const direction = ref(1); // 1 for forward, -1 for backward const toggleDirection = () => { direction.value = direction.value === 1 ? -1 : 1; }; const handleLottieMount = (instance: any) => { console.log('Lottie component mounted:', instance); // You can access the lottie-web instance here if needed }; return { AnimationData, direction, toggleDirection, handleLottieMount, }; }, }); </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

Debug

Known issues

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

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

affects: >=3.0.0

gotchaThe `Vue3Lottie` component is a default export, not a named export. Incorrectly importing it with curly braces will lead to a runtime error.

fix

Always use `import Vue3Lottie from 'vue3-lottie'` for importing the main component. Do not use `import { Vue3Lottie } from 'vue3-lottie'`.

affects: >=1.0.0

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

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.

affects: >=3.0.0

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

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.

affects: >=3.2.0

Errors

Common errors & fixes

TypeError: (0 , vue3_lottie__WEBPACK_IMPORTED_MODULE_0__.Vue3Lottie) is not a function

Attempting to import `Vue3Lottie` as a named export when it's a default export.

fix

Change the import statement from `import { Vue3Lottie } from 'vue3-lottie'` to `import Vue3Lottie from 'vue3-lottie'`.

Property 'Vue3Lottie' was accessed during render but is not defined on instance.

The `Vue3Lottie` component was not correctly registered with the Vue application, common in Nuxt 3 or non-global registrations.

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.

Error: [Vue warn]: Failed to resolve component: Vue3Lottie

The `Vue3Lottie` component is not imported or registered in the component where it's being used.

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

Upgrade

Version history

3.3.1latest on npm

Audit

Dependencies

vuerequiredPeer dependency required for the Vue 3 component.

lottie-webrequiredUnderlying animation engine for rendering Lottie files. Implicitly used by vue3-lottie.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/megasanjay/vue3-lottie ↗

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

homepagehttps://vue3-lottie.vercel.app/ ↗