How can I use a Vue Vimeo component in Nuxt 3?

Question

I am trying to use the vue-vimeo-player package in Nuxt 3 without success. I have tried the following approaches.

Plugin approach

plugins/vimeo.client.js

import VueVimeoPlayer from "vue-vimeo-player"

export default defineNuxtPlugin((nuxtApp ) => {

  nuxtApp.vueApp.use(VueVimeoPlayer)
  
  return {
    provide: {
      VueVimeoPlayer
    }
  }
})

components/Video.vue

<script setup>

  const props = defineProps({
    entry: {
      type: Object,
    }
  })

  const { VueVimeoPlayer } = useNuxtApp()

</script>

<template>
  <div>
    <client-only>
      <VueVimeoPlayer :video-id="entry.vimeoVideoId" />
    </client-only>
  </div>
</template>

** Result **

[Vue warn]: Invalid vnode type when creating vnode: undefined. 
  at <ClientOnly> 
  at <Video entry= {vimeoVideoId: '547345908'} > 
  at <ContentPage slug="test-page" > 
  at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouteProvider key="/test-page" routeProps= {Component: {…}, route: {…}} pageKey="/test-page"  ... > 
  at <BaseTransition onAfterLeave= [ƒ] mode="out-in" appear=false  ... > 
  at <Transition onAfterLeave= [ƒ] name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=2 > 
  at <NuxtRoot>

Import approach

<script setup>

  import VueVimeoPlayer from "vue-vimeo-player"

  const props = defineProps({
    entry: {
      type: Object,
    }
  })

  const Vimeo = resolveComponent(VueVimeoPlayer)

</script>

<template>
  <div>
    <client-only>
      <Vimeo :video-id="entry.vimeoVideoId" />
    </client-only>
  </div>
</template>

** Result **

chunk-3NMN3MUW.js?v=ab1f30af:1381 [Vue warn]: Unhandled error during execution of setup function 
  at <Video entry= {vimeoVideoId: '547345908'} > 
  at <ContentPage slug="test-page" > 
  at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/test-page" routeProps= {Component: {…}, route: {…}}Component: {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …}route: {fullPath: '/test-page', hash: '', query: {…}, name: 'app-section-slug', path: '/test-page', …}[[Prototype]]: Object pageKey="/test-page"  ... > 
  at <BaseTransition onAfterLeave= [ƒ] mode="out-in" appear=false  ... > 
  at <Transition onAfterLeave= [ƒ] name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=2 > 
  at <NuxtRoot>

chunk-3NMN3MUW.js?v=ab1f30af:213 Uncaught (in promise) TypeError: str.replace is not a function
    at chunk-3NMN3MUW.js?v=ab1f30af:213:1
    at chunk-3NMN3MUW.js?v=ab1f30af:208:1
    at resolve (chunk-3NMN3MUW.js?v=ab1f30af:3899:1)
    at resolveAsset (chunk-3NMN3MUW.js?v=ab1f30af:3883:1)
    at resolveComponent (chunk-3NMN3MUW.js?v=ab1f30af:3852:1)
    at setup (Test.vue:11:1)
    at callWithErrorHandling (chunk-3NMN3MUW.js?v=ab1f30af:1580:1)
    at setupStatefulComponent (chunk-3NMN3MUW.js?v=ab1f30af:7383:1)
    at setupComponent (chunk-3NMN3MUW.js?v=ab1f30af:7346:1)
    at mountComponent (chunk-3NMN3MUW.js?v=ab1f30af:6033:1)

What am I doing wrong here?

Answer 1

Update The module is now compatible with Nuxt 3.

npm install vue-vimeo-player@next --save

There are 2 possible ways you can implement this module.

1. Import it globally.

~/plugins/videmo-player.js

The module does not have any typescript support so use the .js

import VimeoPlayer from 'vue-vimeo-player'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VimeoPlayer)
})

Component usage.

<template>
  <div>
    <VimeoPlayer video-id="605069004"></VimeoPlayer>
  </div>
</template>

Expected Result

2. Import locally in a component

<script setup>
import { vueVimeoPlayer } from 'vue-vimeo-player'
</script>
<template>
  <div>
    <vue-vimeo-player
      video-id="605069004"
    />
  </div>
</template>

Expected Result

This warning is fixed. I don't see it on my end.

[Vue warn]: A plugin must either be a function or an object with an "install" function.

Video example