dotlottie / player-component

https://dotlottie.io
MIT License
207 stars 28 forks source link

Same issue in Nuxt as #46 but no vue-player #309

Open Jamiewarb opened 9 months ago

Jamiewarb commented 9 months ago

There was an issue opened in #46 about Next.js and the liberal use of the Window object.

The resolve was a react-player. However, we have the same issues in Nuxt.

What workaround do we have for using dotlottie with Nuxt?

afsalz commented 8 months ago

Hi @Jamiewarb our dotlottie-player is not meant to run on server-side.

Here is how you can resolve this issue with nuxt

  1. create a plugin file. /plugins/lottie-player.js
    
    import '@dotlottie/player-component';

export default () => {}; // keep this line

2. Add it to `nuxt.config.ts`
```js,title="nuxt.config.ts"
  plugins: [{ src: "./plugins/lottie-player.js", mode: "client"}],
  vue: { 
    compilerOptions: { 
      isCustomElement: (tag) => tag.startsWith("dotlottie-player"), // Also tell vue its a custom component
    }
  }
  1. Use the player within a template
    <template>
    <div>
    <dotlottie-player style="width: 500px; height: 500px;" src="https://lottie.host/5525262b-4e57-4f0a-8103-cfdaa7c8969e/VCYIkooYX8.json" autoplay loop />
    </div>
    </template>

Please let us know if this works for you.