thecode
thecode

Reputation: 11

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

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

Upvotes: 0

Views: 609

Answers (1)

Naren
Naren

Reputation: 4470

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");

Upvotes: 1

Related Questions