<template>
  <DotLottieVue ref="player" src="path/to/animation.lottie" />
</template>

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

export default {
  components: {
    DotLottieVue,
  },
  setup() {
    const player = ref(null);

    onMounted(() => {
      // Access the player instance directly via the ref
      // Note: The Vue component directly exposes core player methods.
      const playerInstance = player.value;
      if (!playerInstance) return;

      // Example: Use documented methods available on the instance
      playerInstance.setSpeed(2);
      playerInstance.setSegment([10, 50]);
    });

    onUnmounted(() => {
      // Clean up on unmount using documented destroy method
      // accessed via the ref
      player.value?.destroy();
    });

    return {
      player,
    };
  },
};
</script>

<template>
  <div>
    <!-- Use :key binding to force re-render when src changes -->
    <DotLottieVue
      ref="player"
      :key="currentAnimation"
      :src="animations[currentAnimation]"
      :autoplay="true"
      :loop="true"
    />

    <div class="animation-buttons">
      <button
        v-for="(_, id) in animations"
        :key="id"
        @click="switchAnimation(id)"
        :class="{ active: currentAnimation === id }"
      >
        {{ id }}
      </button>
    </div>
  </div>
</template>

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

export default {
  components: {
    DotLottieVue,
  },
  setup() {
    const player = ref(null);
    const currentAnimation = ref("animation1");

    const animations = {
      animation1: "path/to/animation1.lottie",
      animation2: "path/to/animation2.lottie",
      animation3: "path/to/animation3.lottie",
    };

    const switchAnimation = (animationId) => {
      currentAnimation.value = animationId;
    };

    return {
      player,
      currentAnimation,
      animations,
      switchAnimation,
    };
  },
};
</script>