Lottie

A reusable Lottie animation wrapper component built with vue3-lottie, ready for drop-in use in any Nuxt 3 + Composition API project. It supports looping, autoplay, and full customization through props.

npm install vue3-lottie

Plugin Setup

plugins/vue3-lottie.client.ts

This plugin registers vue3-lottie globally in your Nuxt 3 app so that it can be used in any component without additional imports.

// plugins/vue3-lottie.client.ts
import Vue3Lottie from 'vue3-lottie'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Lottie)
})

🧭 How to Get a Lottie Animation from LottieFiles

If you want to use custom animations in your Nuxt app with vue3-lottie, follow these simple steps:

1. Visit LottieFiles

Head over to https://lottiefiles.com/ in your browser.

2. Search for an Animation

In the search bar, type in a keyword that describes the animation you want. For example, to show a “Success” message or state, search for: 👉 success

3. Choose and Download the JSON

Browse through the available animations.

Once you find one you like, click on it.

Hit the Download button and hit the Lottie JSON button (you might need to log in or sign up).

4. Add the JSON to Your Project

Move the downloaded .json file into your project folder, preferably: /assets/animations/success.json

5. Use It in Your Component

Here’s a working example of how to use the success animation in your Vue component:

    <template>
      <client-only>
          <Vue3Lottie
          :height="112"
          :width="112"
          :animationData="animationData"
        />
        </client-only>
    </template>

<script setup>

import animationData from "@/assets/animations/success.json";


</script>

💡 Tip: You can replace success.json with any other animation file you downloaded.