@nguyenshort/vue-lottie v1.0.0

Vue 3 Lottie Animation Player

Installation

npm i @nguyenshort/vue-lottie 

Initialization

Include in it either globally (in main.js) or a Vue component.

Global:

// main.ts, main.js
import Vue from "vue";
import VueLottie from '@nguyenshort/vue-lottie'

app.use(VueLottie)

Component:

import { VueLottiePlayer } from '@nguyenshort/vue-lottie'
export default {
    components: {
       VueLottiePlayer
    }
}

Usage

<script>
import { VueLottiePlayer } from '@nguyenshort/vue-lottie'
export default {
  name: "MyComponent",
  components: {
    VueLottiePlayer
  }
};
</script>

<template>
  <div>
    <vue-lottie-player
        width='250px'
        height='200px'
        loop
        path="https://assets8.lottiefiles.com/packages/lf20_7jnffdxl.json"
    />
  </div>
</template>