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:

    <div id="app">
        <lottie-vue-player :src="``"
                           style="width: 100%; height:400px">

    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',

The following example demonstrates playing an animation with the Lottie-Vue component.

Last updated