What does extends do?

VueJunior~1 min read

extends is a Vue (Options API) mechanism that lets you inherit the settings of one component in another, similar to mixins, but only from a single "parent" component.

In simpler terms:

extends mixes all the options of another component into a component: data, methods, computed, hooks, and so on.

It's similar to classic inheritance, only for Vue components.

Example of using extends

base.js - the base component

export default {
  data() {
    return {
      baseMessage: 'Hello from base'
    }
  },
  methods: {
    greet() {
      console.log(this.baseMessage)
    }
  }
}

the child component

import base from './base.js'

export default {
  extends: base,

  data() {
    return {
      childMessage: 'Hello from child'
    }
  }
}

Now the component has:

baseMessage from the base component
the greet() method from the base component
childMessage - its own state

Why do you need extends?

1. Inheriting base components

You can create a "base" component with:

base validation
base API methods
base computed properties
base hooks

and reuse them.

2. Creating behavior templates for components

For example, a shared component:

with the same loading logic
with the same methods
with the same data()

3. It's an alternative to mixins (but simpler and cleaner)

While mixins can be many, extends is only one.

Important features of extends

1. A component inherits all options of the base component

data, methods, computed, watch, lifecycle hooks, props, and so on.

2. On a name conflict, the child component wins

// base.js
methods: { greet() { console.log('base') } }

// child
methods: { greet() { console.log('child') } }

Call result:

child

3. Hooks are merged, but the order is like mixins:

the parent's hooks
the child's hooks

4. It can be used together with mixins (not recommended)

5. Rarely used in Vue 3

Because the Composition API completely removes the need for inheritance.

Summary (ideal for an interview)

extends is a way to inherit one component from another in the Options API. The child component receives all the parent's options (data, methods, computed, hooks). On a name conflict, the child component wins. In Vue 3 it's rarely used, since the Composition API replaces it.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.