What is Vue.extend for?

Question

This is a simple enough one, but I\'m not getting the answer I need from the documentation. I\'m in the process of learning Vue.js, and I don\'t really understand where Vue.

Answer 1

In addition to the answers provided, there is a practical use case for calling Vue.extend() directly if you are using TypeScript.

It is recommended in most cases to import component definitions from other files when they are needed, instead of registering them globally with Vue.component(). It keeps things organized in larger projects and makes it easier to trace problems.

With the right library, TypeScript can look at your component definition and figure out what the type of the component will be when it's initialized, meaning it can then check the functions you've defined to see if they make sense (i.e. if you reference this.foo there is actually a prop, data field, computed value, or method named foo). If you use Vue.component() it will be able to do this, but not if you use the other typical way of making components available, which is exporting object literals.

However, another option is to export your component definitions wrapped in Vue.extend(). TypeScript will then be able to recognize it as a Vue component and run its type checking accordingly, but you won't have to abandon the best-practice pattern of exporting components rather than registering them globally.