Getting Started

In this tutorial, we will install the dotLottie Vue player and render a Lottie animation in a Vue 3 application. By the end, an animation will be playing on a loop in your app.

Prerequisites

• A working Vue 3 project (created with Vite, the Vue CLI, or a similar tool)

• Node.js and npm installed

Step 1: Install the Package

Add @lottiefiles/dotlottie-vue to your project:

When the install finishes, @lottiefiles/dotlottie-vue appears in the dependencies section of your package.json.

Step 2: Create an Animation Component

Create a new file at src/components/MyAnimation.vue and add the following:

<template>
  <DotLottieVue
    src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"
    autoplay
    loop
    style="width: 300px; height: 300px"
  />
</template>

<script setup>
import { DotLottieVue } from "@lottiefiles/dotlottie-vue";
</script>

Replace the src value with the URL of your own .lottie or .json animation file.

The autoplay and loop props start playback as soon as the animation loads and repeat it continuously. These are two of many props the component accepts — we'll stay with the basics here, and you can browse the rest in the Props Reference later.

Step 3: Render the Component

Open src/App.vue and use the new component:

<template>
  <MyAnimation />
</template>

<script setup>
import MyAnimation from "./components/MyAnimation.vue";
</script>

Now start your development server:

npm run dev

Open the app in your browser. You should now see your animation playing in a 300 × 300 pixel area, looping continuously. Notice that it restarts automatically each time it finishes — that's the loop prop at work.

What You've Accomplished

You installed the dotLottie Vue player, created a reusable animation component, and rendered a looping Lottie animation in your app. When the component unmounts, it cleans up the underlying player for you, so there's nothing more to manage.

From here you can:

• Control playback and react to player events with the Examples

• Drive the player directly through its instance in Advanced Usage

• Look up every prop in the Props Reference

• Explore the component's exports in the API Reference