# 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:

```vue
<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](/en/runtimes/distributions/js/v0.x/api/reference#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`:

```vue
<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](/en/runtimes/distributions/js/v0.x/api/reference#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:

```vue
<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](/en/runtimes/distributions/vue/v0.x/advanced-usage#switch-animations-in-a-multi-animation-file).

## Related

- [Advanced Usage](/en/runtimes/distributions/vue/v0.x/advanced-usage) — drive the player through the `DotLottie` instance
- [Props Reference](/en/runtimes/distributions/vue/v0.x/props-reference) — all component props with types and defaults
- [API Reference](/en/runtimes/distributions/vue/v0.x/api-reference) — `setWasmUrl` and instance access
- [Core player API](/en/runtimes/distributions/js/v0.x/api/reference) — every property, method, and event