Vue 'is' Attribute

❮ Previous Vue Built-in Attributes Reference Next ❯

Example

The is attribute is connected to the computed value 'activeComp' with v-bind (shorthand :) so that either the 'comp-one' component or the 'comp-two' component is displayed.

App.vue:

<template>
  <h1>Dynamic Components</h1>
  <p>App.vue switches between which component to show.</p>
  <button @click="toggleValue = !toggleValue">Switch component</button>
  <component :is="activeComp"></component>
</template>

Run Example »

See more examples below.

Definition and Usage

The is attribute can be used for three things:

1. Dynamic components: The is attribute is set on the built-in <component> element to create a dynamic component, where the is attribute defines which component should be the active one.

In more detail, the is attribute is bound to a property with v-bind, and the property holds the name of which component that should be the active one. (See the Example above)

2. Replace a native element with a Vue component: is="vue:my-component" is placed on a native HTML element to replace it with a Vue component. (See Example 1)

If we do not use the vue: prefix, it will be interpreted as a customized built-in element, as explained right below here, and the Vue component will not be inserted.

3. Customized built-in element: Customized built-in elements can be written in JavaScript, and the is attribute can be used on an HTML tag to define it as such a customized built-in element. This is not a Vue feature.

More Examples

Example 1

Using the is attribute to replace an <img> tag with a Vue component.

App.vue:

<template>
  <h2>Example Built-in 'is' Attribute</h2>
  <p>The IMG tag below is set to be replaced by a component by the use of 'is="vue:child-comp"'.</p>
  <img is="vue:child-comp" />
</template>

ChildComp.vue:

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>This is the child component</p>
  </div>
</template>

<style scoped>
div {
  border: solid black 1px;
  background-color: lightgreen;
  padding: 10px;
  max-width: 250px;
  margin-top: 20px;
}
</style>

Run Example »

Vue Tutorial: Dynamic Components

Vue Tutorial: Vue Components

Vue Tutorial: Vue Computed Properties

Vue Tutorial: Vue v-bind Directive

Vue Reference: Vue v-bind Directive

Vue Reference: Vue <component> Element