Vue

Usage for Vue projects

1. Install using your favorite package manager:

pnpm add @dotlottie/player-component

yarn install @dotlottie/player-component

npm install @dotlottie/player-component

2. Declaring the custom component

For vite users

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes('-')
        }
      }
    })
  ]
}

Vue CLI config

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => ({
        ...options,
        compilerOptions: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: tag => tag.startsWith('ion-')
        }
      }))
  }
}

Usage

<script setup lang="ts">
import '@dotlottie/player-component';
import { ref } from 'vue';

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

<template>
  <div>
    <dotlottie-player
      src="[...].lottie"
      controls
     />
    
    // Override playback options 
    <dotlottie-player
      src="[...].lottie"
      :direction.attr="direction"
      controls
      autoplay
      :playMode.attr="playMode"
      loop
      :speed.attr="speed"
    />
  </div>
</template>