/v-lottie

Vue composables for Lottie

Primary LanguageTypeScriptMIT LicenseMIT

v-lottie

Vue composables for Lottie!

NPM version

Usage

npm install v-lottie
<script setup>
import { onMounted } from 'vue'
import { useLottie } from 'v-lottie'
const el = ref(null)
onMounted(() => {
  const animation = useLottie(el)
})
</script>

<template>
  <div ref="el" />
</template>

Type Declarations

export type MaybeRef<T> = Ref<T> | T
export type MaybeRefValues<T extends UseLottieOptions> = {
  [K in keyof T]: MaybeRef<T[K]>
}
export type AnimationConfigOmitContainer<T extends AnimationConfig> = Omit<T, 'container'>
export type UseLottieMix<A extends AnimationConfig<'svg'>, B extends AnimationConfig<'svg'>> =
  (AnimationConfigOmitContainer<A> | AnimationConfigOmitContainer<B>) & UseLottieOtherOptions

export interface UseLottieOtherOptions {
  speed: number
  direction: AnimationDirection
}
export type UseLottieOptions = UseLottieMix<AnimationConfigWithData, AnimationConfigWithPath>
export function useLottie(el: MaybeRef<Element>, options: MaybeRefValues<UseLottieOptions>): AnimationItem