Atom

The foundational building block for dynamic element rendering with renderless capabilities.

Usage

The Atom component provides dynamic element rendering and is used as the foundation for all other components in Vuetify0. It supports polymorphic rendering through the as prop and can render as any HTML element or Vue component.

API

Atom

The base component for dynamic element rendering.

• Props

  interface AtomProps {
    as?: DOMElement | null
    renderless?: boolean
  }

  • as: Element or component to render as (default: 'div')
  • renderless: Render only slot content without wrapper (default: false)

• Slots

  interface AtomSlots<T> {
    default: (props: T) => any
  }

• Expose

  interface AtomExpose {
    element: TemplateRef<HTMLElement | null>
  }

• Details

  • Automatically handles self-closing tags (img, input, hr, br, etc.)
  • Forwards all attributes using v-bind
  • Slot props include all passed attributes
  • Used as the foundation for Avatar, Popover, and other components