lottie-web-vueLottie animations for Vue 3

Play Airbnb Lottie-web animations exported from After Effects with a single Vue component. TypeScript-ready, SSR-safe, 21 kB.

Get Started

API Reference

View on GitHub

🎬

One component, full control

Pass your Lottie JSON as a prop and control playback with play(), pause(), stop(), goToAndPlay() and more via a template ref.

🧩

Vue 3 + TypeScript

Ships typed declarations, works with script setup, the Options API, and app.use() global registration.

🪶

Tiny by design

lottie-web is a peer of your bundler graph, not bundled in — the package is ~21 kB unpacked and your bundler dedupes lottie-web.

🖥️

SSR-safe

Initialises lottie-web only in onMounted, so server-side rendering and static site generation work out of the box.

See it running

vue

<script setup lang="ts">
import { LottieAnimation } from "lottie-web-vue"
import WatermelonJSON from "./assets/watermelon.json"
</script>

<template>
  <LottieAnimation :animation-data="WatermelonJSON" :auto-play="true" :loop="true" />
</template>

Install it:

npmyarnpnpm

bash

npm install lottie-web-vue

bash

yarn add lottie-web-vue

bash

pnpm add lottie-web-vue

lottie-web-vueLottie animations for Vue 3

One component, full control

Vue 3 + TypeScript

Tiny by design

SSR-safe

See it running ​

See it running