CODEWITHSUNDEEP
javascriptvue.js
ashok poudel
ashok poudel

Reputation: 723

Template or render function not defined in vue-youtube-embed

I am using this plugin for vue https://github.com/kaorun343/vue-youtube-embed But when I use it . It gives me this error . I don't know what is causing this error

Vue warn]: Failed to mount component: template or render function not 
defined.

Here is my source code 

        <template>
        <div>
            <youtube :video-id="'wyNGaq8XmH8'"></youtube>
        </div>
    </template>

    <script>
        import VueYouTubeEmbed from  'vue-youtube-embed'
        Vue.component('youtube',VueYouTubeEmbed)
        export default {
            props:['progamData'],
            data(){
                return{
                    programs:[],
                    currentVideo:null,
                    player:null
                }
            }

        }
    </script>

Any help will be appriciated thanks in advance

Upvotes: 1

Views: 690

Answers (1)

Bert
Bert

Reputation: 82489

The vue-youtube-embed library is designed as a plugin. The line, 

import VueYouTubeEmbed from  'vue-youtube-embed'

imports the plugin, not a component. If you want to import it locally to a component, you need to do it this way:

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

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

export default {
  name: "App",
  components: {
    youtube: YouTubePlayer
  }
};

Here is a working example.

Alternatively, you could just use the plugin in your main script.

import VueYouTubeEmbed from "vue-youtube-embed";
Vue.use(VueYouTubeEmbed);

And here is a working version of that.

Upvotes: 2

Related Questions