Overview
Atom is the lowest-level primitive in Vuetify Zero, providing polymorphic rendering with three modes: Element Mode (default), Renderless Mode, and Null Mode. It serves as the foundation for all other components that need polymorphic rendering capabilities.
Key Features
- Polymorphic element rendering (div, button, span, etc.)
- Self-closing tag detection (img, input, br, hr, etc.)
- Automatic attribute forwarding to rendered element
- Generic slot props typing for type-safe attribute passing
- Template ref exposure for DOM element access
- Renderless mode for maximum flexibility
Usage
<script lang="ts" setup>
import { Atom } from '@vuetify/v0'
function handleClick() {
console.log('clicked')
}
</script>
<template>
<Atom as="button" @click="handleClick">
Click me
</Atom>
</template>
Props
as
DOMElement | null
default:"'div'"
The HTML element to render as, or null for renderless mode
When true, renders slot content directly without a wrapper element
Slots
Default slot that receives all forwarded attributes as props
Exposed
element
TemplateRef<HTMLElement | null>
Template ref to the rendered HTML element (null in renderless mode)
Examples
Basic
Custom Element
Self-Closing Tags
Renderless Mode
Attribute Forwarding
Slot Props
<template>
<!-- Renders as div by default -->
<Atom>Content</Atom>
</template>
<template>
<!-- Renders as button -->
<Atom as="button" @click="handleClick">
Click me
</Atom>
<!-- Renders as span -->
<Atom as="span">
Span content
</Atom>
</template>
<template>
<!-- Renders img without children -->
<Atom as="img" src="test.jpg" alt="Test" />
<!-- Renders input -->
<Atom as="input" type="text" placeholder="Enter text" />
<!-- Renders hr -->
<Atom as="hr" />
</template>
<template>
<!-- Renders slot content directly without wrapper -->
<Atom renderless>
<div class="custom">Custom</div>
</Atom>
<!-- Equivalent to renderless -->
<Atom :as="null">
<span>Direct</span>
</Atom>
</template>
<template>
<Atom
as="div"
class="custom-class"
id="custom-id"
data-test="value"
aria-label="Close"
@click="handleClick"
>
Content
</Atom>
</template>
<script setup>
import { h } from 'vue'
import { Atom } from '@vuetify/v0'
</script>
<template>
<Atom
class="test-class"
id="test-id"
>
<template #default="props">
<span :class="props.class">Content</span>
</template>
</Atom>
</template>
Accessibility
Atom forwards all ARIA attributes to the rendered element:
<template>
<Atom
as="button"
aria-label="Close"
aria-pressed="true"
>
Close
</Atom>
</template>
SSR
Atom is fully compatible with SSR and will render correctly on the server:
<template>
<!-- Renders on server -->
<Atom as="section" class="wrapper">
Content
</Atom>
<!-- Self-closing tags render on server -->
<Atom as="img" src="/test.png" alt="Test" />
</template>
