Overview

vue3-lottie was created to help developers add Lottie animations to their Vue 3 applications. In my search for a simple way to add Lottie animations to my Vue application I found a suprising lack of maintained solutions. I decided to create my own solution and share it with the community.

vue3-lottie is a vue wrapper around the lottie-web library with a few additional features. Typescript support has been added to make it easier to use.

vue3-lottie is not a full-featured Lottie library. It is only a wrapper around the lottie-web library. It does not support all of the features of the lottie-web library.

Installation

Install the vue3-lottie package using your favorite package manager.

yarn
yarn add vue3-lottie@latest
npm
npm install vue3-lottie@latest --save
pnpm
pnpm add vue3-lottie@latest

Import the CSS

Import the required CSS file.

main.ts (Vue SPAs)
import 'vue3-lottie/dist/style.css'
app.vue (Nuxt)
import 'vue3-lottie/dist/style.css'
✨ Well done! Now you can start using vue3-lottie in your application.
Edit this page on GitHub
Table of Contents