Usage

Describes how to use the Lottie-Vue component on a web page.

On a Web Page

Add the lottie-vue-player element and set the src property to a URL pointing to a valid Lottie JSON. The following example is an App.vue file:
<template>
<div id="app">
<lottie-vue-player :src="`https://assets10.lottiefiles.com/packages/lf20_tzjfwgud.json`"
:theme="options.theme"
:player-size="options.playerSize"
:player-controls="true"
style="width: 100%; height:400px">
</lottie-vue-player>
</div>
</template>
​
<script>
export default {
name: 'App',
data() {
return {
options: {
minimizable: false,
playerSize: "standard",
backgroundColor: '#fff',
backgroundStyle: 'color',
theme: {
controlsView: "standard",
active: "light",
light: {
color: '#3D4852',
backgroundColor: '#fff',
opacity: '0.7',
},
dark: {
color: '#fff',
backgroundColor: '#202020',
opacity: '0.7',
}
}
}
}
}
}
</script>
The following example demonstrates playing an animation with the Lottie-Vue component.