Usage with Vue 3

Register the component

The most common use case is to register the component globally.

// main.js
import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'

import 'vue3-lottie/dist/style.css'

createApp(App).use(Vue3Lottie).mount('#app')
If you get an error with Typescript, try use(Vue3Lottie, { name: "Vue3Lottie" })

To define global components for Volar type-checking you will need to add:

// components.d.ts
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    LottieAnimation: typeof import('vue3-lottie')['Vue3Lottie']
  }
}
export {}
If you need to use a custom component name, you can pass it as an option to the plugin.
app.use(Vue3Lottie, { name: 'LottieAnimation' }) // use in  your vue template as  <LottieAnimation />
  • name string (default: 'Vue3Lottie') - set custom component name

Alternatively you can also import the component locally in your SFC.

import { Vue3Lottie } from 'vue3-lottie'

import 'vue3-lottie/dist/style.css'

export default {
  components: {
    Vue3Lottie,
  },
}

Use the component

You can then use the component in your template as follows:

Script Setup
<template>
  <Vue3Lottie :animationData="AstronautJSON" :height="200" :width="200" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { Vue3Lottie } from 'vue3-lottie'

import 'vue3-lottie/dist/style.css'

import AstronautJSON from './astronaut.json'
</script>
Composition API
<template>
  <Vue3Lottie :animationData="AstronautJSON" :height="200" :width="200" />
</template>

<script>
import { defineComponent } from 'vue'
import { Vue3Lottie } from 'vue3-lottie'

import 'vue3-lottie/dist/style.css'

import AstronautJSON from './astronaut.json'

export default defineComponent({
  components: {
    Vue3Lottie,
  },
  setup() {
    return {
      AstronautJSON,
    }
  },
})
</script>
Options API
<template>
  <Vue3Lottie :animationData="AstronautJSON" :height="200" :width="200" />
</template>

<script>
import { Vue3Lottie } from 'vue3-lottie'

import 'vue3-lottie/dist/style.css'

import AstronautJSON from './astronaut.json'

export default {
  components: {
    Vue3Lottie,
  },
  data() {
    return {
      AstronautJSON,
    }
  },
}
</script>
Edit this page on GitHub
Table of Contents