Getting [Vue warn]: Component is missing template or render function issue

[SleepiestAdam]

Hi,
Fairly sure this is me doing something wrong, but I've installed lottie-web-vue using:

npm install lottie-web-vue

I'm using vue version 3.2.36

I've followed the instructions to import the library in my main.js file:
import LottieAnimation from "lottie-web-vue";

And:

  createApp(App)
    .use(LottieAnimation)
    .mount("#app");

In my template I then have:

<template>   
  <div class="w-full h-full">
            <lottie-animation
                class="h-32 w-32 bg-green-500"
                ref="anim"
                :animationData="require('@/assets/rainbow.json')"
                :loop="true"
                :autoPlay="true"
                :speed="1"
            />
    </div>
</template>

<script>
import LottieAnimation from 'lottie-web-vue'

export default {
  name: "createTab",
  components: {
    LottieAnimation
  },
};
</script>

The @/assets/rainbow.json is the example from here: https://lottiefiles.com/38726-stagger-rainbow
It's in the correct folder.

However whenever trying to load the lottie file I get the following error in the javascript console, and the animation fails to load:

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Component is missing template or render function. 
  at <LottieAnimation class="h-32 w-32 bg-green-500" ref="anim" animationData= {v: '5.7.1', fr: 29.9700012207031, ip: 0, op: 100.000004073084, w: 1000, …}  ... > 

Not sure where I'm going wrong - and was hoping someone could point me in the right direction 😅?

[anton-ax]

Do not use
import LottieAnimation from 'lottie-web-vue'
in your template

[garbit]

Hi @Native1989 - I'm taking a look at improving this now so that you can import directly in the component. Apologies for any confusion. Thanks!

[AlexRadch]

I got the same error in VuePress 2. How to fix it?

I registered LottieAnimation component in config.ts

    registerComponentsPlugin({
      components: {
        LottieAnimation: 'lottie-web-vue'
      }
    })

And try to use it in README.md

<LottieAnimation
    animationData="https://assets9.lottiefiles.com/packages/lf20_3JQWlpZxIn.json"
    :loop="true"
    :autoPlay="true"
/>

<lottie-animation
    animationData="https://assets9.lottiefiles.com/packages/lf20_3JQWlpZxIn.json"
    loop="true"
    autoPlay="true"
/>

But get error

[Vue warn]: Component is missing template or render function. 
  at <Anonymous animationData="https://assets9.lottiefiles.com/packages/lf20_3JQWlpZxIn.json" loop=true autoPlay=true > 
  at <AsyncComponentWrapper animationData="https://assets9.lottiefiles.com/packages/lf20_3JQWlpZxIn.json" loop=true autoPlay=true > 
  at <Index.html> 
  at <AsyncComponentWrapper> 
  at <Content> 
  at <Page key="/ForTheBeloved/HappyNewYear/" > 
  at <BaseTransition mode="out-in" onBeforeEnter=fn<onBeforeEnter> onBeforeLeave=fn<pending>  ... > 
  at <Transition key=1 name="fade-slide-y" mode="out-in"  ... > 
  at <Layout> 
  at <Vuepress onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <VuepressApp>

[Zilvinaskli]

same in quasar, doesn't work

[Zilvinaskli]

Hi, Fairly sure this is me doing something wrong, but I've installed lottie-web-vue using:

npm install lottie-web-vue

I'm using vue version 3.2.36

I've followed the instructions to import the library in my main.js file: import LottieAnimation from "lottie-web-vue";

And:

  createApp(App)
    .use(LottieAnimation)
    .mount("#app");

In my template I then have:

<template>   
  <div class="w-full h-full">
            <lottie-animation
                class="h-32 w-32 bg-green-500"
                ref="anim"
                :animationData="require('@/assets/rainbow.json')"
                :loop="true"
                :autoPlay="true"
                :speed="1"
            />
    </div>
</template>

<script>
import LottieAnimation from 'lottie-web-vue'

export default {
  name: "createTab",
  components: {
    LottieAnimation
  },
};
</script>

The @/assets/rainbow.json is the example from here: https://lottiefiles.com/38726-stagger-rainbow It's in the correct folder.

However whenever trying to load the lottie file I get the following error in the javascript console, and the animation fails to load:

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Component is missing template or render function. 
  at <LottieAnimation class="h-32 w-32 bg-green-500" ref="anim" animationData= {v: '5.7.1', fr: 29.9700012207031, ip: 0, op: 100.000004073084, w: 1000, …}  ... > 

Not sure where I'm going wrong - and was hoping someone could point me in the right direction 😅?
have you managed to fix it?

[garbit]

I have now updated the package so this should be resolved - let me know!

https://github.com/garbit/lottie-web-vue/releases/tag/v2.0.7