How to correctly globally register and use Vue Rangedate Picker component?

Question

I am trying to use VueRangedatePicker and I can't seem to figure out how to use this on the template of some other vue component. I am using Webpack. I have registered the component/plugin on my main.js file like this:

import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store/store'
import firebase from './firebase-config'
import vuefire from 'vuefire'

//////////////// HERE 
import VueRangedatePicker from 'vue-rangedate-picker' // importing the plugin here
Vue.use(VueRangedatePicker) // using it
Vue.component('VueRangedatePicker', {  }) // creating the component globally (if I don't add this line the app complains the component is not registered
////////////////

Vue.config.productionTip = false
let app;
Vue.use(vuefire)

firebase.auth().onAuthStateChanged(function(user){
  if (!app) {
    /* eslint-disable no-new */
    app = new Vue({
      el: '#app',
      template: '<App/>',
      components: { App, VueRangedatePicker },
      router,
      store,
      VueRangedatePicker
    })
  }
})

Then on my component component_A.vue I am again importing the VueRangedatePicker plugin in the following manner:

<template>
  <div>
       <vue-rangedate-picker @selected="onDateSelected" i18n="EN" />
  </div>
</template>
<script>
import firebase,{ itemRef } from '../firebase-config';
import VueRangedatePicker from 'vue-rangedate-picker'

export default {
firebase() { 
    return {
    items: itemsRef,
    }
  },
  name: 'component_A',
  data () {
    return {

    }
  },
created() {  
  console.log(VueRangedatePicker);
},
methods: {
  onDateSelected: function (daterange) {
    this.selectedDate = daterange
  },
}
</script>

I know the plugin/component is registered because when I log the Vue Rangedate Picker on the console I can see the object

However I am getting the an error message like this

I have read the complete readme.md file on the project's github but I am still puzzled. What is Vue_Daterange_picker? Is it a plugin? Is it a component? Is it a plugin that allows me to build a component? I am quite confused. Can you clarify this for me a little better? How can I make this work?

Answer 1

This is because you have registered the component with an empty name. In main.js :

Vue.component('DatePicker', VueRangedatePicker)

Then in your component use the component as :

<date-picker></date-picker>