Vue.component is not a function

[AndreasDeveloper]

Having a issue using VueYoutube component in single file component. I am using props for :video-id. Modal.vue component is than used in another Component file. But the error is 'created' in Modal.vue. With VueJS i am using NuxtJS.

vue-youtube version is ^1.3.4. & nuxt is 2.0.0

components/Modal.vue:

<template>
    <div class="modal-backdrop">
        <i class="icon ion-ios-close close-icon" @click="close"></i>
        <div class="modal">
            <VueYoutube :video-id="videoLink" ref="youtube"></VueYoutube>
        </div>
    </div>
</template>

<script>
import VueYoutube from 'vue-youtube';

export default {
    name: 'Modal',
    // Methods
    methods: {
        close() {
            this.$emit('close');
        },
        playVideo() {
            this.player.playVideo();
        }
    },
    // Props
    props: ['videoLink'],
    components: {
        VueYoutube
    },
    computed: {
        player() {
            return this.$refs.youtube.player;
        }
    }
};
</script>

VueJS Throws This Error:

Any possible solution for this?

[ainarend]

I got it to work in a single component like this:

import { Youtube } from 'vue-youtube';

And then:

components: {
    Youtube,
}

[1e4]

I got it to work in a single component like this:

import { Youtube } from 'vue-youtube';

And then:

components: {
    Youtube,
}

It's 2021, I got this error too, just wanted to mention that this still solves the issue when using Nuxt

[kurteev]

just create a plugin plugins/vue-youtube.js add it to nuxt.config.js

default export {
...
components: true,
plugins: [
      {src: "~/plugins/vue-youtube", mode: "client"},
],
...
}

and add to page or component <youtube :height="height" width="100%" :video-id="code" ref="youtube"></youtube>

notice ,i wrote component in lowercase, with camelcase was error