turopoff / vue-lottie-player

Lottie Animation Player for VueJs
MIT License
13 stars 4 forks source link

Cannot use import statement outside a module #29

Closed ybabenkoJapp closed 2 years ago

ybabenkoJapp commented 2 years ago

Hey! I try to import VueLottiePlayer like in your demo but get an error: Cannot use import statement outside a module

import VueLottiePlayer from "vue-lottie-player";
export default {
  components: {
    vLottiePlayer: VueLottiePlayer
  }
//...

my component

<template>
  <div
    ref="lottieHolder"
    v-editable="blok"
    class="lottie-anim-container"
    :class="[computedClassObject, blok.class]"
  >
    <client-only>
      <vLottiePlayer
        v-intersect="{
          disposeWhen: true,
          rootMargin: '10px',
          threshold: 0.25,
          onChange: handleIntersection,
        }"
        :path="blok.lottie_animation_file_or_url | formatFilesUrl"
        name="lottieAnimation"
        :loop="blok.loop"
        :autoplay="false"
        :width="'100%'"
        :height="'100%'"
        @animControl="(anim) => (lottieAnimation = anim)"
      ></vLottiePlayer>
    </client-only>
  </div>
</template>
"dependencies": {
    "nuxt": "^2.2.0",
    "nuxt-delay-hydration": "^0.4.5",
    "nuxt-font-loader-strategy": "^1.1.9",
    "nuxt-lazy-load": "^1.2.9",
    "standard-version": "^8.0.1",
    "storyblok-nuxt": "^1.2.0",
    "swiper": "^7.0.9",
    "vue-class-component": "^7.2.3",
    "vue-fragment": "^1.5.2",
    "vue-intersect-directive": "^1.1.1",
    "vue-lottie-player": "^0.1.9",
    "vuex": "^3.5.1"
  },
<img width="1440" alt="Screenshot 2022-11-04 at 19 35 02" src="https://user-images.githubusercontent.com/84498280/200040508-8880884c-a13f-462b-809f-6d58d3e9edd2.png">
turopoff commented 2 years ago

Please check this project https://github.com/turopoff/vue-lottie-player-nuxt-demo

ybabenkoJapp commented 2 years ago

@turopoff thanks. In my case, it helped

nuxt.config.js :

build: {
        transpile: ['vue-lottie-player'],
}