Why do I receive in TypeError: Object(...) is not a function in Vuejs?

Question

Hi I have installed Vuejs 3 and I am trying to embed a vimeo video with this library: import vueVimeoPlayer from 'vue-vimeo-player'.

I imported this in the main.js like this:

import vueVimeoPlayer from 'vue-vimeo-player'
Vue.use(vueVimeoPlayer)

My view is this one:

<template>
 <div id="app">
   <vueVimeoPlayer
    ref="player"
    :video-url="url"
    :player-height="500"
    :player-width="500"
    :autoplay="true"
  /> 
    <div @click="updateUrl()">click me</div>
     <div @click="errorUrl()">error pls</div>
  </div>
 </template>

 <script>
  import { vueVimeoPlayer } from 'vue-vimeo-player';

  export default {
  name: 'App',
  components: {
    vueVimeoPlayer,
  },
  data () {
    return {
    url: "https://vimeo.com/605358147/b5c4f01703",
   };
  },
  methods: {
     updateUrl() {
      this.url = "https://vimeo.com/604413787/dd09a5711";
     },
     errorUrl() {
      this.url = "https://vimeo.com/605266340/a7aa996ffc";
    },
  },
};
</script>

I receive this huge error:

TypeError: Object(...) is not a function
at Proxy.render (index.es.js?558f:174:1)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
at new Watcher (vue.runtime.esm.js?2b0e:4484:1)
etc 
etc

So I wonder what am I doing wrong? Because I saw it working check this url:

https://codesandbox.io/s/m4z5v63jqy

Thanks

Answer 1

Vue.use is not directly available anymore in Vue3, you would have to use createApp().use

That's why you're seeing error. Try like this

Make sure you've install correct version of vue-vimeo-player to support Vue3

 import { createApp } from 'vue'
 import App from './App.vue'
 import vueVimeoPlayer from 'vue-vimeo-player'

 const app = createApp(App)
 app.use(vueVimeoPlayer).mount("#app");