Error on VUE. (window is not defined)

[msaifudeen]

Versions Using:

"@lottiefiles/vue-lottie-player": "^1.0.1" "@lottiefiles/lottie-player": "^1.0.4",

Error getting:

[samuelOsborne]

Hi @msaifudeen, If you're using "@lottiefiles/vue-lottie-player" you don't need to import "@lottiefiles/lottie-player". If you still want to keep the lottie-player dependancy, this issue should be fixed in version 1.5.2 of the lottie-player :-)

[msaifudeen]

@samuelOsborne The same window error happened in @lottiefiles/vue-lottie-player. Tested with various workarounds, but same issue is occurring.

[samuelOsborne]

@msaifudeen Will look for a fix and update you

[msaifudeen]

Thank you for the quick update @samuelOsborne

[samuelOsborne]

Hi @msaifudeen I assume you're using nuxt, have you followed these steps when using the vue-lottie-player?

1. Create a folder called 'plugins' at the root of your project
2. Create a file named 'lottie-vue-player.client.js' inside the 'plugins' directory
3. Inside this file put :

import Vue from 'vue';

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

Vue.use(LottieVuePlayer);

4. in nuxt.config.js :

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

You should then be able to use the element inside your templates

[msaifudeen]

Seen this solution early, But not using NUXT.

[samuelOsborne]

Are you only using vuejs?

[samuelOsborne]

Hi @msaifudeen , I haven't managed to re-create your error. Please note that for the moment lottie-vue-player only supports Vue 2 and not Vue 3. Heres the steps I took to get it running on Vue 2 :

1. My main.js looks like this:

import Vue from 'vue'
import App from './App.vue'
import LottieVuePlayer from "@lottiefiles/vue-lottie-player";

Vue.use(LottieVuePlayer);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

2. In my .vue file I can then:

<template>
    <lottie-vue-player :src="`https://assets10.lottiefiles.com/packages/lf20_tzjfwgud.json`"
                       :player-controls="true"
                       style="width: 100%; height:400px">
    </lottie-vue-player>
</template>

[msaifudeen]

Added codes same as in the git doc in main.js, but window not defined error was occurring. Directly imported in the component, got async component related error.

[samuelOsborne]

@msaifudeen Can you share snippets of implementation code? Or if you manage to reproduce it on a codesandbox that'd be a great help.

[iAkashPattnaik]

the same happens to me, I'm using next.js

[BugProg]

Hi !

I have the same error but with Angular (17)