Struggling with integrating VueRangedatePicker into a template for another Vue component. Using Webpack, already registered the component/plugin in main.js:
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'
//////////////// Registered component here
import VueRangedatePicker from 'vue-rangedate-picker' // imported plugin
Vue.use(VueRangedatePicker) // used it
Vue.component('VueRangedatePicker', { }) // globally created component (to prevent registration error)
////////////////
Vue.config.productionTip = false
let app;
Vue.use(vuefire)
// Firebase authentication check
firebase.auth().onAuthStateChanged(function(user){
if (!app) {
/* eslint-disable no-new */
app = new Vue({
el: '#app',
template: '<App/>',
components: { App, VueRangedatePicker },
router,
store,
VueRangedatePicker
})
}
})
In component_A.vue, VueRangedatePicker is imported again:
<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>
Confirmed registration of VueRangedatePicker by logging object to consolehttps://i.sstatic.net/2t32p.png
Error message encounteredhttps://i.sstatic.net/Yw8Qo.png
Despite reading project's readme.md, confusion persists around Vue_Daterange_picker - plugin or component? How to make it work?