Primitive

The Primitive component is used as a building block for making new components. By default it simply makes a div element with slotted content.

"Why not just make a div in my component?" you may be asking. Here's a subtle use case that can be powerful. Imagine you make a set of components that can be composed together to create something like a modal. By default one of your components is an HTML button. Now imagine a developer using this component realizes they need it to be an HTML a element. Rather than making a new component, they can use the as prop and pass a turning this component into and an HTML a element. It also has uses when building A11Y compliant applications.

Examples

<Primitive as="p" class="foo" id="bar">
    The quick brown fox jumped over the lazy dogs.
</Primitive>

Renders as:

<p class="foo" id="bar">
    The quick brown fox jumped over the lazy dogs.
</p>

A working example:

<Primitive as="button" class="product-plan-action" @click="emits('product-action:click')">
    {{ label }}
</Primitive>

An example can be seen in /frontend/components/ProductPlan/ProductPlanAction.vue

Component Props

Prop	Description	Options
as	the HTML element to render as. Defaults to div

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
--