Skip to content

v2.0.0

Latest
Compare
Choose a tag to compare
@Applelo Applelo released this 03 May 17:36
e0478b0

Breaking changes

All Lottie options are now move into lottie attribute to use typings from lottie (and not a version provided by Blottie).

For example, if you have this

<template>
 <Blottie
      class="animation"
      path="https://assets6.lottiefiles.com/packages/lf20_bXGMKilbSf.json"
      :loop="true"
      container-tag="main"
      @ready="onReady"
    >
      <template #loading>
        Loading...
      </template>
    </Blottie>
</template>

This will be change to this

<template>
<Blottie
        class="animation"
        :lottie="{
          loop: true,
          path: 'https://assets6.lottiefiles.com/packages/lf20_bXGMKilbSf.json',
        }"
        container-tag="main"
        @ready="onReady"
        @loop-complete="onLoop"
      >
        <template #loading>
          Loading...
        </template>
      </Blottie>
</template>

What's new

  • Add useBlottie() composable
<script lang="ts" setup>
const el = ref<HTMLElement>()
const { lottie, anim } = useBlottie(
   container, 
   {
       loop: true,
       path: 'https://assets6.lottiefiles.com/packages/lf20_bXGMKilbSf.json',
   }
)
</script>

<template>
<div ref="el"></div>
</template>
  • Rewrite Vue component by using useBlottie composable
  • Update readme
  • Update dependencies
  • Improve typings
  • Update licence to MIT

Full Changelog: v1.1.4...v2.0.0