Not compatible with Vue 3 RC

[ahmedh01]

Running into the following issue trying to use vue-youtube on Vue 3 RC

Installed vue-youtube via npm, and imported it into my project globally in main.js following the directions given by the Vue 3 docs.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueYoutube from 'vue-youtube'

createApp(App)
  .use(VueYoutube)
  .mount('#app')

In the console, I get the following error:

Uncaught TypeError: Cannot set property '$youtube' of undefined

Might be something minor?

[jameshwc]

same here

[sampullman]

I think migrating this to Vue3 is pretty easy:

• beforeDestroy -> beforeUnmount
• Use render() { return Vue.h('div'); } instead of render(h) { return h('div'); }
• Maybe something minor in the library setup

[anteriovieira]

I will migrate to version 3 soon.

[olemarius]

Any ETA for migrating to vue 3 ?

[ggraca]

Also looking forward to getting Vue 3 support. Did anyone found a workaround in the meantime?

[jameshwc]

I just injected the api js as a workaround.

  setup(props, context) {    
    var tag = document.createElement('script')    
    tag.src = 'http://www.youtube.com/iframe_api'
    const firstScriptTag = document.getElementsByTagName('script')[0]    
    firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag)
}

Then you can assign player= new YT.player and use its api. details at my repo: https://github.com/jameshwc/Million-Singer-Vue-Frontend/blob/main/src/views/Song.vue

[ainarend]

I created a PR with the changes necessary to get it working with Vue3: https://github.com/anteriovieira/vue-youtube/pull/82

I did not have time to fully dive into to the rollup setup, so ignore the changes i made in the PR to the /dist folder, i made those only to get the component working for my own project.

[wobsoriano]

Published a lightweight component that works with both Vue 2/3

https://github.com/wobsoriano/vue-lite-youtube-embed