Appearance
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
html
<Primitive as="p" class="foo" id="bar">
The quick brown fox jumped over the lazy dogs.
</Primitive>
Renders as:
html
<p class="foo" id="bar">
The quick brown fox jumped over the lazy dogs.
</p>
A working example:
html
<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 |
---|---|
-- |