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

Question

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

Answer 1

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] })