Use Vimeo Player SDK with Nuxt.js

Question

I want to use the library like Vimeo Player SDK with Nuxt.js.

<template>
  <iframe
    id="video01"
    ref="video01"
    src="https://player.vimeo.com/video/{videoID}">
  </iframe>
</template>
<script>
import Player from '@vimeo/player'
  
export default {
  created () {
    const iframe = this.$refs.video01
    const player = new Player(iframe)
  }
}
</script>

But I cannot get DOM. In case of SPA, I couldn't get DOM. So error log is here.

TypeError: You must pass either a valid element or a valid id.

In case of SSR, window cannot use. So error log is here.

window is not defined

Can't I use Vimeo Player SDK with Nuxt.js?

Answer 1

Did you try the vue-vimeo-player package? It could be helpful to have something managed the Vue way.

For the SPA, you will need to wait for the element to be on the page; hence try your code in a mounted hook (created step is before anything get mounted to the DOM).

If you want SSR too, you could try to wrap the whole thing into a

<client-only>
    <! --- note I used vue-vimeo-player and not the vimeo-player --->
  <vue-vimeo-player ref="player" :video-id="yourVideoID"/>
</client-only>

---

Here is a repo that I've created to show you how simple it is to make it work: https://github.com/kissu/so-nuxt-vimeo/blob/master/pages/index.vue It made me find that you should use the <vue-vimeo-player /> component and not <vimeo-player />.

However, I imported the Vue wrapper for Vimeo Embed Player in the demo locally in a Vue component.