Vue-Lottie and Nuxt

If you want to use using vue-lottie, you need to import the right lottie.vue component, located in your node_modules folder:

import Lottie from 'vue-lottie/src/lottie.vue'

Hope it works.

I use lottie-web instead of vue-lottie with my VueJS apps and I had a similar problem to yours.

The way I made it work was to install it normally with npm install lottie-web and then call it in my components as: import lottie from 'lottie-web/build/player/lottie';.

Perhaps you have to also type in the path in the same manner with vue-lottie.

import lottie from 'lottie-web'

should work

I use lottie-web, simply install it with npm -> npm install lottie-web or yarn -> yarn add lottie-web

Then create a file in your plugin folder -> plugins/lottie.js and add this code:

import lottie from 'lottie-web';

export default ({ app }, inject) => {
  inject('lottie', lottie);
};

Finally register it in your nuxt.config.js :

plugins: [{ src: '~/plugins/lottie', mode: 'client' }],

Now you can use lottie anywhere in your nuxt application with this.$lottie.

See this code snipped to get you started:

<template>
  <div
      ref="animationElement"
      class="animation"
      @mouseover="open"
      @focus="open"
      @mouseleave="close"
      @blur="close"
    />
</template>
<script>
export default {
 mounted() {
    this.$lottie.loadAnimation({
      container: this.$refs.animationElement, // the dom element that will contain the animation
      loop: false,
      autoplay: false,
      path: 'your_path/lottie.json', // the path to the animation json
    })
  },
  methods: {
    close() {
        this.$lottie.setSpeed(1)
        this.$lottie.setDirection(1)
        this.$lottie.play()
    },
    open() {
      this.$lottie.setSpeed(1.5)
      this.$lottie.setDirection(-1)
      this.$lottie.play()
    },
  },
}
</script>