How to correctly import a component in Vue.js

Question

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>

Did you write Vue.component('DatePicker' .... before initialize Vue instance new Vue({ ... ? — Sajib Khan
– Sajib Khan, Commented Feb 27, 2019 at 13:02

Steven Spungin · Accepted Answer · 2019-02-27 13:13:32Z

1

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 }

answered Feb 27, 2019 at 13:13

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashvin777 · Accepted Answer · 2019-02-27 13:10:40Z

0

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>
  `,
});

edited Feb 27, 2019 at 13:10

answered Feb 27, 2019 at 13:07

Ashvin777

1,48213 silver badges19 bronze badges

1 Comment

Steven Spungin Over a year ago

Most folks using Vue will use modern syntax: components: { Datepicker },

Collectives™ on Stack Overflow

How to correctly import a component in Vue.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related