Nuxt

1. Install using your favorite package manager:

pnpm add @dotlottie/player-component

yarn install @dotlottie/player-component

npm install @dotlottie/player-component

2. Create a plugins folder

Create a plugins folder with the following file dotlottie.client.js

touch dotlottie.client.js

//dotlottie.client.js

import * as DotLottiePlayer from '@dotlottie/player-component'

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

3. Declaring the component

Inside the nuxt.config.ts file we're going to add the dotlottie-player custom element.

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => ['dotlottie-player'].includes(tag),
    },
  },
});

4. Usage inside .vue files

<script setup lang="ts">
import { ref } from 'vue';

const speed = ref(5);
const direction = ref(1);
const playMode = ref('bounce');
</script>

<template>
  <div>
    <dotlottie-player
      src="..."
      :direction.attr="direction"
      controls
      autoplay
      :playMode.attr="playMode"
      loop
      :speed.attr="speed"
    />
  </div>
</template>