Component

Vue Mobile List Item Component

<DomAppListItem>

A touch-sized row that works in any layout. Use as="div" for rows containing switches, inputs, or other controls so interactive elements are never nested inside a button.

Playground

Try every prop live

App list item playground

Adjust the props to explore sizing, content, and behaviour.

App list item playground

DOM Studio Phone

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomAppListItem } from '@getdom/studio';

const data = reactive({
		"as": "button",
		"label": "Sync Capacitor status bar",
		"description": "Match native chrome to the DOM Studio theme.",
		"meta": "Now",
		"chevron": true,
		"selected": false,
		"danger": false
	});
</script>

<template>
	<DomAppListItem
		v-bind="data"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`as`	string	string	'button'	Element or component used for the row.
`label`*	string	string	—	Primary row label.
`description`	string	string	''	Optional secondary copy.
`meta`	string	string	''	Small trailing metadata shown beside the label.
`chevron`	boolean	boolean	false	Show a trailing chevron when no trailing slot is provided.
`selected`	boolean	boolean	false	Show the row as selected.
`danger`	boolean	boolean	false	Style the row as a destructive action.

Auto-generated from App list item.props and inline _edit hints.

Slots

Name	Scope	Description
#icon	—	Leading icon or avatar.
#trailing	—	Trailing value, switch, badge, or custom action.