How do I extend another VueJS component in a single-file component? (ES6 vue-loader)

javascript ecmascript-6 vue.js es6-module-loader
Rhys picture Rhys · Mar 12, 2016 · Viewed 46.3k times · Source

I am using vue-loader (http://vuejs.github.io/vue-loader/start/spec.html) to construct my *.vue single-file components, but I am having trouble with the process from extending a single-file component from another.

If one component follows the spec to export default { [component "Foo" definition] }, I would think it is just a matter of importing this component (as I would with any child component) and then export default Foo.extend({ [extended component definition] })

Unfortunately this does not work. Can anyone please offer advice?

Answer

Rhys picture Rhys · Mar 12, 2016

After some testing, the simple solution was to be sure to export a Vue.extend() object rather than a plain object for any component being extended.

In my case, the base component:

import Vue from 'vue'

export default Vue.extend({ [component "Foo" definition] })

and the extended component:

import Foo from './Foo'

export default Foo.extend({ [extended component definition] })

Related questions

forEach is not a function error with JavaScript array

I'm trying to make a simple loop: const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) But I get the following error: VM384:53 Uncaught TypeError: parent.children.forEach is not a function …

Read More
ES6 import using at ('@') sign in path in a vue.js project using Webpack

I'm starting out a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack). As I was walking through the generated files I noticed the following imports in …

Read More
Vue.js: How to specify props in single file component?

I'm defining a single file component I want to use props option on that component. But where can I add the code? <template> <div class="hello"> <h1>{{ msg }}</h1> </div> &…

Read More