[Vue warn]: Failed to mount component: template or render function not defined in Vue CLI 4

Question

I'm trying to import v-movable (https://github.com/thewebkid/v-movable) in a component inside my Vue app created with Vue CLI 4, but I keep getting the following error:

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

  found in

    ---> <Movable>
      <Intro>
        <App> at src/App.vue
          <Root>

Currently my main.js file looks like this:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app');

And my Intro.vue component file looks like this:

<template>
  <div class="intro">
    <div class="guideline">
      <div class="circle start-circle"></div>
      <movable class="circle end-circle">
        <IconSlideUp id="icon-slide-up" />
        <span class="label">Slide</span>
      </movable>
      <div class="line"></div>
    </div>
  </div>
</template>

<script>
import IconSlideUp from '@/assets/icon-slide-up.svg'
import movable from 'v-movable'

export default {
  name: 'Intro',
  props: {
    msg: String
  },
  components: {
    IconSlideUp,
    movable
  },
  methods: {
    
  }
}
</script>


<style scoped lang="scss">
...
</style>

Do I need to globally register movable in my main.js? How would I go about doing that? Any help would be very much appreciated, and please do let me know if there's any other information I can/should provide.

Answer 1

In the project's Github demo, there is a component import, which can be done in a SFC this way:

import movable from './components/movable';

^{https://codesandbox.io/s/mystifying-cartwright-yvis1}

You are using the plugin installation, but doing it inside of a component instead of main.js, and it's missing Vue.use. Remove the import from your component and change main.js:

main.js

import Vue from 'vue'
import App from './App.vue';
import movable from 'v-movable';

Vue.use(movable);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');