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