Usage with Nuxt 3

Register the component

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.use(Vue3Lottie, { name: 'Vue3Lottie' })
   })

   Copy to clipboard
4. Import the css file required by the component into your app.vue file.

   <template>
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
   </template>
   
   <script setup lang="ts">
   import 'vue3-lottie/dist/style.css'
   
   // ... rest of your code
   </script>

   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.

Use the component

Now you can use the component anywhere in your app. 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>