Extend vue.js component from third-party library

Question

I'm using component ElDatepicker from element-ui and I want to change it's template and event handler method. I'm trying to do something like this in single file component:

import Vue from 'vue';
import ElDatePicker from 'element-datepicker'
Vue.use(ElDatePicker)
var dpkr = Vue.component('ElDatePicker')
console.log(dpkr)
export default {
    extends: ['ElDatePicker']
}

But it doesn't work. How i can change it?

https://github.com/ElemeFE/element/tree/dev/packages/date-picker - component package

Yep, I need to change it's functionality, but I don't know how to — Dan
– Dan, Commented Feb 5, 2017 at 13:01
Does this answer your question? How do I extend another VueJS component in a single-file component? (ES6 vue-loader) — ChewySalmon
– ChewySalmon, Commented Jul 31, 2020 at 12:48

Michael2 · Accepted Answer · 2019-12-01 21:15:10Z

2

Your main problem is that extends should specify a single component and not an array. You should reference the component and not the name.

import Vue from 'vue';
import ElDatePicker from 'element-datepicker'

export default {
  extends: ElDatePicker
}

The repo you posted is from element-ui

Do npm install element-ui

Then:

import { DatePicker } from 'element-ui'
export default {
  // Use mixins for array syntax
  mixins: [DatePicker]
  // OR use extends without array
  extends: DatePicker
}

answered Dec 1, 2019 at 21:15

Michael2

9304 silver badges17 bronze badges

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

Comments

Amit K · Accepted Answer · 2019-01-18 09:11:24Z

0

You have to first install Element UI in your project using npm install element-ui. Then you have to edit your main.ts/main.js file and add

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

This should solve your problem. For more help, check Element UI

answered Jan 18, 2019 at 9:11

Amit K

1374 bronze badges

Collectives™ on Stack Overflow

Extend vue.js component from third-party library

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related