Component

Vue Mobile App Shell

<DomAppShell>

A bounded app viewport with safe areas, pinned top and bottom slots, and one scrolling content region. Fills the viewport by default; use height="100%" only inside an explicitly sized parent. Set content-scroll to false when a nested DomAppStack owns scrolling.

Playground

Try every prop live

App shell playground

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

App shell playground

DOM Studio Phone

Preview

Mobile component

Sample

Scrollable app content

Content section 1

The shell keeps top and bottom chrome pinned while this area scrolls.

Content section 2

The shell keeps top and bottom chrome pinned while this area scrolls.

Content section 3

The shell keeps top and bottom chrome pinned while this area scrolls.

Content section 4

The shell keeps top and bottom chrome pinned while this area scrolls.

Content section 5

The shell keeps top and bottom chrome pinned while this area scrolls.

Content section 6

The shell keeps top and bottom chrome pinned while this area scrolls.

Bottom chrome

Playground.vuevue

Install

npm install @getdom/studio

vue

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

const data = reactive({
		"keyboardBehavior": "resize",
		"keyboardInset": null,
		"hideBottomOnKeyboard": false,
		"height": "100%",
		"contentScroll": true,
		"variant": "app"
	});
</script>

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

Reference

Props

Control props

Name	Type	TS	Default	Description
`keyboardBehavior`	'resize' \| 'none'	string	'resize'	Resize to the visible viewport while editing. Use none when the native host owns keyboard layout.
`keyboardInset` ts `type number \| null = unknown;`	number	number \| null	—	Optional native keyboard height in CSS pixels. Leave null to detect viewport changes; zero explicitly means closed.
`hideBottomOnKeyboard`	boolean	boolean	false	Hide bottom navigation while the keyboard is visible. Leave false for a persistent reply composer.
`height`	string	string	'100dvh'	App height as a CSS length. Use 100dvh standalone, 36rem for an embedded app, or 100% inside a sized parent.
`contentScroll`	boolean	boolean	true	Let the main region scroll. Disable when a nested stack or split-pane layout owns scrolling.
`variant`	'app' \| 'card'	string	'app'	Use app for full-screen app views and card for inset surfaces.

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

Slots

Name	Scope	Description
#top	—	Top navigation, status, or toolbar content.
#(default)	—	Scrollable app content.
#bottom	{ keyboardOpen }	Bottom navigation or persistent controls. Receives the detected keyboard state.
#overlay	—	Absolute overlay layer for drawers, action sheets, and app-level panels.

Events

Name	Payload	Description
@keyboard-change	{ open, height }	Estimated keyboard state or the app-supplied native keyboard inset.

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