Closed ybabenkoJapp closed 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">
Please check this project https://github.com/turopoff/vue-lottie-player-nuxt-demo
@turopoff thanks. In my case, it helped
nuxt.config.js :
build: { transpile: ['vue-lottie-player'], }
Hey! I try to import VueLottiePlayer like in your demo but get an error: Cannot use import statement outside a module
my component