DOM Studio

Component

Vue User Profile Header

<DomAppProfile>

An iOS-style account header with a circular profile image, name, email, and an optional action. Place it above settings rows or inside any app stack screen.

Playground

Try every prop live

App profile playground

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

App profile playground

Alex Morgan

alex@example.com

Playground.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomAppProfile } from '@getdom/studio';

const data = reactive({
		"name": "Alex Morgan",
		"email": "alex@example.com",
		"src": "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&crop=faces&w=192&h=192&q=80",
		"actionLabel": "Edit profile"
	});
</script>

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

Reference

Props

Control props

NameTypeTSDefaultDescription
name*stringstring—Account holder name; also supplies initials if the image is unavailable.
emailstringstring''Optional account email shown below the name.
srcstringstring''Profile image URL. Falls back to initials if it cannot load.
actionLabelstringstring'Edit profile'Profile action label. Set to an empty string to hide the default action.

Auto-generated from App profile.props and inline _edit hints.

Slots

NameScopeDescription
#actions—Replace the default profile action with account controls.

Events

NamePayloadDescription
@action()Fired when the profile action is selected. The application owns navigation or editing.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.