Installation

Explains how to install the Lottie-Vue component.

Using Javascript or TypeScript

Ensure that you have npm or yarn installed before installing this component.

• Install package using npm or yarn.

npm install --save @lottiefiles/vue-lottie-player (or)
yarn add @lottiefiles/vue-lottie-player

• Import the vue-lottie-player package in your code.

import LottieVuePlayer from '@lottiefiles/vue-lottie-player';

• Add the player as a plugin to Vue:

Vue.use(LottieVuePlayer);

Using Nuxt

• Install package using npm or yarn.

npm install --save @lottiefiles/vue-lottie-player (or)
yarn add @lottiefiles/vue-lottie-player

• Create a folder called plugins at the root of your project.

• Create a file named lottie-vue-player.client.js inside the plugins directory.

• Add the following code to the lottie-vue-player.client.js file.

import Vue from 'vue';

import LottieVuePlayer from "@lottiefiles/vue-lottie-player";

Vue.use(LottieVuePlayer);

• Add the following line to the nuxt.config.js file:

 plugins: [
    "~/plugins/lottie-vue-player.client.js"
  ]

Quick Start Development

To rapidly build and view the Vue interface:

1. Clone the Lottie-Vue GitHub Repository.

2. Run yarn install

Watch the demo of the player.