Examples

Recipes for common dotLottie Vue player tasks, including controlling playback, handling player events and errors, and switching animations.

Use these recipes to control playback, react to player events, and switch between animations with the dotLottie Vue player. Each example is a self-contained component you can adapt to your app.

Control Playback

To control playback from your UI, get the underlying DotLottie instance through a template ref and call its playback methods:

<template>
  <div>
    <DotLottieVue
      ref="dotLottieVueRef"
      src="https://lottie.host/animation.lottie"
      :autoplay="false"
      style="width: 300px; height: 300px; border: 1px solid #eee;"
    />
    <div style="margin-top: 10px">
      <button @click="play">Play</button>
      <button @click="pause">Pause</button>
      <button @click="stop">Stop</button>
      <button @click="setSpeed(0.5)">Speed 0.5x</button>
      <button @click="setSpeed(1)">Speed 1x</button>
      <button @click="setMode('forward')">Forward</button>
      <button @click="setMode('reverse')">Reverse</button>
    </div>
  </div>
</template>

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

const dotLottieVueRef = ref(null);

const getInstance = () => dotLottieVueRef.value?.getDotLottieInstance();

const play = () => getInstance()?.play();
const pause = () => getInstance()?.pause();
const stop = () => getInstance()?.stop();
const setSpeed = (speed) => getInstance()?.setSpeed(speed);
const setMode = (mode) => getInstance()?.setMode(mode);
</script>

For the full list of playback methods, see the core player Methods reference.

Handle Events and Errors

To react to player events such as load, play, pause, complete, and loadError, access the underlying instance with getDotLottieInstance(), add listeners in onMounted, and remove them in onUnmounted:

<template>
  <div>
    <DotLottieVue
      ref="dotLottieVueRef"
      src="https://lottie.host/animation.lottie"
      :autoplay="true"
      :loop="true"
      style="width: 200px; height: 200px; border: 1px solid #eee;"
    />
    <p>Last Event: {{ lastEvent }}</p>
  </div>
</template>

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

const dotLottieVueRef = ref(null);
const lastEvent = ref("none");
let dotLottieInstance = null;

const handleEvent = (eventName) => {
  lastEvent.value = eventName;
};

const handleLoad = () => handleEvent("load");
const handlePlay = () => handleEvent("play");
const handlePause = () => handleEvent("pause");
const handleLoop = () => handleEvent("loop");
const handleComplete = () => handleEvent("complete");
const handleError = (error) => {
  console.error("loadError event fired", error);
  lastEvent.value = "loadError";
};

onMounted(() => {
  dotLottieInstance = dotLottieVueRef.value?.getDotLottieInstance();
  if (dotLottieInstance) {
    dotLottieInstance.addEventListener("load", handleLoad);
    dotLottieInstance.addEventListener("play", handlePlay);
    dotLottieInstance.addEventListener("pause", handlePause);
    dotLottieInstance.addEventListener("loop", handleLoop);
    dotLottieInstance.addEventListener("complete", handleComplete);
    dotLottieInstance.addEventListener("loadError", handleError);
  }
});

onUnmounted(() => {
  if (dotLottieInstance) {
    dotLottieInstance.removeEventListener("load", handleLoad);
    dotLottieInstance.removeEventListener("play", handlePlay);
    dotLottieInstance.removeEventListener("pause", handlePause);
    dotLottieInstance.removeEventListener("loop", handleLoop);
    dotLottieInstance.removeEventListener("complete", handleComplete);
    dotLottieInstance.removeEventListener("loadError", handleError);
  }
});
</script>

For every event and its payload, see the core player Events reference.

Switch Between Animation Files

To build a player that swaps between separate animation files, store the current source in state and bind it to src. A :key binding ensures the component remounts cleanly when the source changes:

<template>
  <div>
    <DotLottieVue
      :src="animations[currentAnimation]"
      :autoplay="true"
      :loop="true"
      :key="currentAnimation"
      style="width: 200px; height: 200px; border: 1px solid #eee;"
    />

    <div style="display: flex; gap: 10px; margin-top: 20px">
      <button
        v-for="(url, id) in animations"
        :key="id"
        @click="currentAnimation = id"
        :style="{
          padding: '8px 16px',
          backgroundColor: currentAnimation === id ? '#4CAF50' : '#f1f1f1',
          color: currentAnimation === id ? 'white' : 'black',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer',
        }"
      >
        {{ id }}
      </button>
    </div>
  </div>
</template>

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

const currentAnimation = ref("animation1");

const animations = {
  animation1: "https://lottie.host/animation1.lottie",
  animation2: "https://lottie.host/animation2.lottie",
  animation3: "https://lottie.host/animation3.lottie",
};
</script>

If your animations are bundled in a single multi-animation .lottie file, switch between them with loadAnimation() instead — see Advanced Usage.

Last updated: July 24, 2026 at 2:45 AMEdit this page
Next

Advanced Usage