Sometimes, we want to extend another Vue.js component in a single-file component.

In this article, we’ll look at how to extend another Vue.js component in a single-file component.

How to extend another Vue.js component in a single-file component?

To extend another Vue.js component in a single-file component, we can use Vue.extend on the base component.

And then we can extend the base component by calling extend on the base component.

For instance, we write

Foo.vue

<script>
import Vue from "vue";

export default Vue.extend({
  //...
});
</script>

to call Vue.extend with the component options object and export it.

And then we can extend the Foo.vue component by writing

<script>
import Foo from "./Foo";

export default Foo.extend({
  //...
});
</script>

to call Foo.extend with the component object definition to extend the Foo component.

Conclusion

To extend another Vue.js component in a single-file component, we can use Vue.extend on the base component.

And then we can extend the base component by calling extend on the base component.