Getting Started with the Vue Player

In this tutorial, you will install and configure the Vue player to display your first Lottie animation in a Vue.js application.

Prerequisites

• Working Vue.js development environment (Vue 3 recommended, using Vite, Vue CLI, etc.).

• Node.js and npm or yarn installed.

Installation

Install the package using your preferred package manager:

# Using npm
npm install @lottiefiles/dotlottie-vue

# Using yarn
yarn add @lottiefiles/dotlottie-vue

Basic Usage Example

Here's a simple Vue Single File Component (SFC) demonstrating how to import and use the player:

<template>
  <div>
    <h2>My Vue Animation</h2>
    <DotLottieVue class="my-lottie-player" // Optional: Add classes for styling
    src="https://lottie.host/your-animation-id.lottie" // Replace with your
    animation URL :autoplay="true" :loop="true" style="width: 300px; height:
    300px;" // Optional: control size />
  </div>
</template>

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

export default {
  name: "AnimationComponent", // Good practice to name components
  components: {
    DotLottieVue,
  },
};
</script>

<style scoped>
/* Optional: Style the container */
.my-lottie-player {
  /* width: 300px; */ /* Example size in <template> */
  /* height: 300px; */
  border: 1px solid #eee;
}
</style>

Explanation:

1. Import: Import DotLottieVue within the <script> block.

2. Register: Register it in the components option (if using Options API).

3. Use: Render the <DotLottieVue /> component in the <template>.

4. Props:

   • src: Required URL or path to your .lottie or .json file.

   • :autoplay="true": Binds the autoplay prop to true (use : or v-bind: for dynamic values/booleans).

   • :loop="true": Binds the loop prop to true.

   • style: Standard Vue style binding for sizing and appearance.

   • class: Standard Vue class binding.

Automatic Cleanup

The component generally handles calling destroy() on the core player instance when the Vue component is unmounted.

Next Steps

• Explore Props: Check out the complete Props Reference.

• See Examples: Learn how to control playback and handle events in the Examples.

• Advanced Usage: Find details on more advanced topics in Advanced Usage.