@lottiefiles/dotlottie-vue

@lottiefiles/dotlottie-vue

[!TIP] Looking for animations to use with this player? Browse 100,000+ free Lottie animations and grab any of them as .lottie or .json, or create your own with Lottie Creator.

Contents

• Introduction
  • What is dotLottie?
• Installation
• Usage
• Live Examples
• APIs
  • DotLottieVue Props
  • Listening to Events
• Development
  • Setup
  • Dev
  • Build

Introduction

A Vue library for rendering lottie and dotLottie animations in the browser.

What is dotLottie?

dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".

Learn more about dotLottie.

Installation

npm install @lottiefiles/dotlottie-vue

Usage

<script setup>
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
</script>

<template>
  <DotLottieVue style="height: 500px; width: 500px" autoplay loop src="https://path-to-lottie.lottie" />
</template>

Live Examples

• Basic Example

APIs

DotLottieVue Props

RenderConfig

The renderConfig object accepts the following properties:

Listening to Events

<script setup>
import { onMounted, ref, watch } from 'vue';
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
const playerRef = ref(null);

onMounted(() => {
  if (playerRef.value) {
    const dotLottie = playerRef.value.getDotLottieInstance();
    dotLottie.addEventListener('pause', () => {
      console.log('paused')
    });
    dotLottie.addEventListener('frame', ({ currentFrame }) => {
      console.log('Frame:', currentFrame)
    });
  }
})
</script>

<template>
  <DotLottieVue autoplay loop ref="playerRef" src="path-to-lottie.lottie" />
</template>

Refer to dotlottie-web Events sections to know more about all available events.

Development

Setup

pnpm install

Dev

pnpm dev

Build

pnpm build