I'm getting did you register the component correctly? error while trying to use vue-rangedate-picker component

[zeuyanik]

Hi everyone,
I followed the instruction on the https://bliblidotcom.github.io/vue-rangedate-picker/

but. code gives me the following error;

Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

My vue code is the following;

<template>
    <vue-rangedate-picker ></vue-rangedate-picker>
</template>

<script>
    import Vue from 'vue';
    import VueRangedatePicker from 'vue-rangedate-picker';

    Vue.use(VueRangedatePicker);
</script>

What am I missing?

[lucascardial]

@zeuyanik I also had the same problem.
You will not be able to register the plugin globally since it is not exporting a vue package.
I had to import locally into each component in order to work.

[bondansebastian]

@zeuyanik @lucca-cardial Try to register it manually like this

import Vue from 'vue';
import DateRangePicker from 'vue-rangedate-picker';

Vue.component('vuejs-daterangepicker', DateRangePicker);

new Vue({
  ...
});

You can change 'vuejs-daterangepicker' with whatever name you want.
Notice that Vue.component method should be called before new Vue.

[Pyro979]

@bondansebastian thanks. works great. Seems like something that should be documented? @bliblidotcom?

[i-am-al-x]

@bondansebastian -- The critical information for me was the simple but cogent advice:

Notice that Vue.component method should be called before new Vue.

That was the reason for my getting the error message. Thanks.

[Shinobi247]

This worked in my case.

Create a config folder right where main.js is.

In that folder create setup-component.js file.

import WHAT from '../where/notsurewhere';
 function setupComponents(Vue) {
   Vue.component('what', WHAT);
 }

 export { setupComponents };
 // Note: Same as file

And at last, just import that in main.js
import { setupComponents } from './config/setup-components';
A friend of mine suggested this.