Usage with Nuxt 3

Register the component globally

1. Create a folder called plugins at the root of your project.
2. Create a file named Vue3Lottie.client.ts inside the plugins directory.
3. Add the following code to the file:

   import { Vue3Lottie } from 'vue3-lottie'export default defineNuxtPlugin((nuxtApp) => {  nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie)})

   Copy to clipboard
   ✨ Well done! This should register a global component that you can call anywhere in your app under the <Vue3Lottie> tag. You can also change the name of the component by changing the name property in the plugin file.

Register the component locally

The component can also simply be imported locally.

<script setup lang="ts">import { Vue3Lottie } from 'vue3-lottie'</script>

Use the component

Now you can use the component. Here is an example of how to use it in a page.

<template>  ...  <client-only>    <Vue3Lottie      animationLink="https://assets10.lottiefiles.com/packages/lf20_soCRuE.json"      :height="200"      :width="200"    />  </client-only>  ...</template>