How do I extend another VueJS component in a single-file component? (ES6 vue-loader)
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] })
Another possibility is the extends option:
import Foo from './Foo'export default { extends: Foo }
The proper way to do this would be to use mixins: http://vuejs.org/guide/mixins.html
Think of mixins as abstract components, which you can extend. So you could create a mixin with any functionality you wanted to have in both, and then just apply it to each of your components.