Error while mounting component

[avxkim]

Using Vue 2.5, importing as instructed in a README, but facing the following error: Failed to mount component: template or render function not defined.

[MikaelEdebro]

I think you need to give more info. I don't have any issues mounting the component with Vue 2.5.x.

[knackjason]

@MikaelEdebro I'm also seeing this issue. Below are the relevant parts of my .vue file. Ignore the manual mounting. I just have to do that for my particular application.

<template>
...
<form @submit.prevent="onSubmit">
  ...
  <div class="form-group datepicker-trigger">
    <label for="timeRange">Time Range</label>
    <input id="timeRange" class="form-control" type="text" :value="formattedTimeRange">
    <airbnb-style-datepicker trigger-element-id="timeRange"
      :date-one="startDate"
      :date-two="endDate"
      :show-action-buttons="true"
    />
  </div>
</form>
</template>

<script>
import Vue from 'vue';
import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker';

import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css';

let vueOptions = {
  name: 'FooBar',
  components: {
    AirbnbStyleDatepicker
  },
  data() {
    return {
      endDate: '',
      startDate: ''
    };
  },
  computed: {
    formattedTimeRange() {
      return '';
    }
  },
  methods: {
    onSubmit() {
      console.log('hi from onSubmit');
    }
  }
};

export function constructor(container, state) {
  vueOptions.parent = state.parent;

  // render and add the vue component
  let FooBar = Vue.extend(vueOptions);
  let instance = new FooBar();
  instance.$mount();

  container.getElement().append(instance.$el);
}
</script>

The error I'm seeing in my browser (Firefox 62.0.3, Chrome 69) is [Vue warn]: Failed to mount component: template or render function not defined.

I'm using Vue.js 2.5.17 and Vue CLI 3.0.4.

[jmazin]

Make sure to register the plugin, ie Vue.use(AirbnbStyleDatepicker, options);. Then it should be available globally.