Usage with Vue 3

If you are upgrading from v2 to v3, please remove the dist/style.css import from your main.js or main.ts file. This css is now imported automatically by the plugin.

Register the component

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

// main.jsimport { createApp } from 'vue'import Vue3Lottie from 'vue3-lottie'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.tsdeclare 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'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 { Vue3Lottie } from 'vue3-lottie'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 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 AstronautJSON from './astronaut.json'export default {  components: {    Vue3Lottie,  },  data() {    return {      AstronautJSON,    }  },}</script>
Edit this page on GitHub
Table of Contents