CODEWITHSUNDEEP
javascripthtmlvue.js
Mizlul
Mizlul

Reputation: 2290

How to correctly import a component in Vue.js

I have the following component defined as below:

import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';

Vue.component('DatePicker', {
    template: `
    <datepicker name="date"></datepicker>
  `,
});

Which I am trying to import it from another file and use it in another component but for some reason I am getting error like:

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

I am pretty new to Vue.js so I am wondering if someone can guide me what am I doing wrong here!

Here is how I am trying to use the component:

require('./datetime-picker');
<DatePicker></DatePicker>

Upvotes: 0

Views: 369

Answers (2)

Steven Spungin
Steven Spungin

Reputation: 29169

To register a component globally, try this:

import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';

Vue.component('DatePicker', Datepicker);

Now you will be able use it by importing it into other components, without needing to use components: { Datepicker }

Upvotes: 1

Ashvin777
Ashvin777

Reputation: 1482

If you are using any components inside a Vue.js template, you should declare that in components property of the component whoever is using it.

Make sure you add that as dependency in your component - 

import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';

Vue.component('DatePicker', {
    components: { Datepicker },
    template: `
    <datepicker name="date"></datepicker>
  `,
});

Upvotes: 0

Related Questions