Add dotlottie packge to Nuxt3

Question

I want to add the dotlottie web player dependency to a nuxt3 application to play lottie animations on a page.

The dotlottie webplayer documentation only provides a guide on adding the library to nuxt 2[1]. How can I add the dotlottie webplayer to a nuxt 3 application?

I have tried creating a plugin to load dotlottie on the client side.

dotlottie-player.client.js

import '@dotlottie/player-component'

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

index.vue

<template>
    <section>
        <div>
            <dotlottie-player
                src="~/assets/graphics/programmer.lottie"
                autoplay
                loop
            />
        </div>
    </section>
</template>

However, this does not work and returns the following errors.

[1] https://docs.lottiefiles.com/dotlottie-player/usage#usage-example-in-nuxtjs-vuejs

Answer 1

so in your plugins folder.

// lottie-player.client.js
// IMPORTANT notice the .client bit
import * as LottiePlayer from "@dotlottie/player-component";
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(LottiePlayer);
});

then you use it like so:

<dotlottie-player :src="`URL`" autoplay loop />