# Advanced Usage
Control the dotLottie Vue player through the underlying DotLottie instance, including playback settings, segments, and multi-animation files.

For anything beyond what the component's props cover, drive the player directly through the underlying `DotLottie` instance. The instance exposes the full core player API — every property, method, and event documented in the [core player API reference](/en/runtimes/distributions/js/v0.x/api/reference).

## Control the Animation Through the Instance

To apply settings programmatically, attach a template ref to the component and call `getDotLottieInstance()` once it has mounted:

```vue
<template>
  <DotLottieVue ref="playerRef" src="path/to/animation.lottie" autoplay />
</template>

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

const playerRef = ref(null);

onMounted(() => {
  const dotLottie = playerRef.value?.getDotLottieInstance();
  if (!dotLottie) return;

  // Play frames 10 to 50 at double speed
  dotLottie.setSpeed(2);
  dotLottie.setSegment(10, 50);
});
</script>
```

From here, use any core method the task needs — `setFrame()` to jump to a frame, `setMode()` to reverse or bounce playback, `tween()` for smooth frame transitions, and so on. See the core player [Methods](/en/runtimes/distributions/js/v0.x/api/reference#methods) reference for the complete list.

You don't need to destroy the player yourself: the component handles calling `destroy()` on the instance when it unmounts.

## Switch Animations in a Multi-Animation File

A single `.lottie` file can contain several animations. To choose which one loads initially, set the [`animationId` prop](/en/runtimes/distributions/vue/v0.x/props-reference). To switch at runtime, call `loadAnimation()` on the instance with the target animation's ID:

```vue
<template>
  <div>
    <DotLottieVue ref="playerRef" src="path/to/multi.lottie" autoplay loop />
    <button @click="switchTo('scene-2')">Play scene 2</button>
  </div>
</template>

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

const playerRef = ref(null);

const switchTo = (animationId) => {
  playerRef.value?.getDotLottieInstance()?.loadAnimation(animationId);
};
</script>
```

If you need the list of animation IDs available in the file, read `manifest.animations` on the instance — see the [Manifest object](/en/runtimes/distributions/js/v0.x/api/reference#manifest-object) reference.

If your animations live in separate files rather than one multi-animation file, swap the `src` prop instead — see [Switch Between Animation Files](/en/runtimes/distributions/vue/v0.x/examples#switch-between-animation-files).

## Related

- [Examples](/en/runtimes/distributions/vue/v0.x/examples) — playback controls, event handling, and file switching
- [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