Vue Player Examples

This page provides practical examples demonstrating various features of the dotLottie Vue player.

Controlling Playback

Use template refs (ref) to access the <DotLottieVue> component instance. You can then call playback methods like play(), pause(), stop(), setSpeed(), etc., directly on the component instance.

<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="handlePlay">Play</button>
      <button @click="handlePause">Pause</button>
      <button @click="handleStop">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>
// Using <script setup> for Composition API conciseness
import { DotLottieVue } from "@lottiefiles/dotlottie-vue";
import { ref } from "vue";

const dotLottieVueRef = ref(null);

const handlePlay = () => dotLottieVueRef.value?.play();
const handlePause = () => dotLottieVueRef.value?.pause();
const handleStop = () => dotLottieVueRef.value?.stop();
const setSpeed = (speed) => dotLottieVueRef.value?.setSpeed(speed);
const setMode = (mode) => dotLottieVueRef.value?.getDotLottieInstance()?.setMode(mode);
</script>

Event & Error Handling

To listen for events from the core dotLottie player (like load, play, pause, complete, loadError), access the underlying instance using the .getDotLottieInstance() method on the component ref. Add event 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) => {
  console.log(`Vue: ${eventName} event fired`);
  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("Vue: loadError event fired", error);
  lastEvent.value = "loadError";
};

onMounted(() => {
  // Use nextTick or ensure the ref is available if needed
  dotLottieInstance = dotLottieVueRef.value?.getDotLottieInstance();
  if (dotLottieInstance) {
    console.log("Attaching listeners to dotLottie instance");
    dotLottieInstance.addEventListener("load", handleLoad);
    dotLottieInstance.addEventListener("play", handlePlay);
    dotLottieInstance.addEventListener("pause", handlePause);
    dotLottieInstance.addEventListener("loop", handleLoop);
    dotLottieInstance.addEventListener("complete", handleComplete);
    dotLottieInstance.addEventListener("loadError", handleError);
  } else {
    console.warn("Could not get dotLottie instance on mount");
  }
});

onUnmounted(() => {
  if (dotLottieInstance) {
    console.log("Removing listeners from dotLottie instance");
    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>

Multi-Animation Player

Dynamically change the animation source (src) by updating state. Using a :key binding ensures the component remounts correctly 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>

Next Steps

Review the Getting Started guide.
Explore all available props in the Props Reference.
Learn about advanced features in Advanced Usage.

dotLottie Vue Player Examples

Vue Player Examples

Controlling Playback

Event & Error Handling

Multi-Animation Player

Next Steps