Light build

vue3-lottie ships two entry points. They expose the same component, props, events and methods. The only difference is which lottie-web player they load.

Why use the light build?

The full lottie-web player evaluates After Effects expressions with eval. Bundlers such as Vite and Rollup flag this during the build:

Use of eval in "node_modules/lottie-web/build/player/lottie.js" is strongly discouraged as it poses security risks and may cause issues with minification.

If your animations don't rely on expressions, the light build removes this warning. It also produces a smaller bundle (roughly 200 KB less before compression). It also works with a strict Content Security Policy that doesn't allow unsafe-eval.

Usage

Change the import path from vue3-lottie to vue3-lottie/light. Nothing else changes.

Vue 3

// main.jsimport { createApp } from 'vue'import Vue3Lottie from 'vue3-lottie/light'createApp(App).use(Vue3Lottie).mount('#app')

Or import the component locally:

<script setup>import { Vue3Lottie } from 'vue3-lottie/light'</script>

Nuxt 3

// plugins/Vue3Lottie.client.tsimport { Vue3Lottie } from 'vue3-lottie/light'export default defineNuxtPlugin((nuxtApp) => {  nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie)})

Limitations

• SVG renderer only. Setting renderer to canvas or html logs a warning, and the animation will not render correctly.
• No expressions. Animations still play, but any property driven by an After Effects expression won't animate as designed. If an animation looks wrong with the light build, switch back to vue3-lottie.