Using vue-youtube-embed in Nuxt.js

[milospantelinac]

I have got problem with vue-youtube-embed. I don't know to implement in Nuxt.js project. I had install vue-youtube-embed across npm. Do anybody can to write the implementation process? PLS

[dandanXO]

I solve the problem using nuxt's plugins

1. add file in plugins folder name youtube.js(or what you want)
2. edit youtube.js write

import Vue from 'vue'

import VueYouTubeEmbed from 'vue-youtube-embed'

Vue.use(VueYouTubeEmbed)

Vue.use(VueYouTubeEmbed, { global: true })

3. edit nuxt.config.js write

plugins: [
    '@/plugins/vuetify',
    '@/plugins/youtube'
  ]

4. restart npm run dev and use no-ssr way to use <youtube> component
   like this

<no-ssr  placeholder="Loading...">
             <youtube  @ready="ready" :player-vars="{ autoplay: 1 }" :player-width="100" :player-height="100" :video-id="play" />
       </no-ssr>

this is my Solution
if have better solution plz tell me.

[leofachini]

I've had to import the plugin this way to work properly in nuxt instead.

plugins: [ { src: '@/plugins/youtube.js', ssr: false } ]

Also, i didn't need the <no-ssr /> tag.

[phivk]

another thing I had to change from the provided example code to make this work, was to turn

data: {
    videoId: 'videoId',
},

into:

data() {
    return {
        videoId: 'videoId'
    }
},

[catman85]

Anyone knows how to get access to these methods in nuxt.js?

• getIdFromURL
• getTimeFromURL

[lystun]

You may want to add the plugin to the transpile build option as such:

build: { transpile : ['vue-youtube-embed'] }

That should do it.

[cam424]

@lystun That was the missing piece of the puzzle for me. Thanks!

[engrmafzaalch]

this.videoId = this.$youtube.getIdFromURL(this.link)
@catman85

[SameeranB]

Hey... for anyone still stuck here... I got it working this way:

First create a js file in the plugins directory with the following code. Mine is called vue-youtube-player.js

import VueYouTubeEmbed, {YouTubePlayer} from "vue-youtube-embed";
import Vue from "vue";

Vue.use(VueYouTubeEmbed, {global: true});

Vue.component('vue-youtube-player', YouTubePlayer)

As far as I understand why, it's because VueYouTubeEmbed is a plugin, not a component. So this way we tell Vue to use the plugin but also register the component.

Add this file to nuxt.config.js in your plugins:

  ...
  plugins: [
    '~/plugins/vue-youtube-player.js',
  ],
  ...

Then in the component or page you want to use the player:

    ...
     <client-only>
         <vue-youtube-player :video-id="videoID"></vue-youtube-player>
    </client-only>
    ...   
    
 <script>
    export default {
      data() {
          return {
              videoID: "VL_r7jtt7PA"
          }
       }
     }
</script>

Hope this helps :)

[ihsanfy]

how do i hide the logo and reference video in nuxt.js?

[yiyasha15]

I followed the steps but I'm getting this error!

An error occurred. Please try again later. (Playback ID: 0jp1TNFmXFgYNYmf)

Please help!

[Dan88Hus]

you are trying to bind video-id so it gives error because there is no value for that.

 <youtube :video-id="ogfYd705cRs"></youtube> this example in your case must be <youtube video-id="ogfYd705cRs"></youtube>

I hope this helps if I am right to understand your problem.

I followed the steps but I'm getting this error!

An error occurred. Please try again later. (Playback ID: 0jp1TNFmXFgYNYmf)

Please help!