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.