Skip to content

Commit

Permalink
Added Vue 3 Composition API example to README docs
Browse files Browse the repository at this point in the history
  • Loading branch information
garbit committed Sep 16, 2021
1 parent c4ef085 commit a8d2416
Showing 1 changed file with 52 additions and 0 deletions.
52 changes: 52 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -219,3 +219,55 @@ export default {
</script>
```

## Vue 3 Composition API with Setup
To use this in a Vue 3 project that uses the ```setup``` Composition API use the following:

```html
<template>
<div id="app">
<lottie-animation
ref="anim"
:animationData="require('@/assets/animation.json')"
:loop="true"
:autoPlay="true"
@loopComplete="loopComplete"
@complete="complete"
@enterFrame="enterFrame"
/>
</div>
</template>

<script>
import LottieAnimation from 'lottie-web-vue'
export default {
setup() {
const anim = ref(null)
const loopComplete = () => {
console.log('loopComplete')
}
const complete = () => {
console.log('complete')
}
cont enterFrame = () => {
console.log('enterFrame')
}
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
anim.value.play()
})
return {
anim,
loopComplete,
complete,
enterFrame
}
}
}
</script>
```

0 comments on commit a8d2416

Please sign in to comment.