UI Mobile Package (@vup/ui-mobile)

@vup/ui-mobile is the mobile UI wrapper for VUP apps. It is based on Ionic Vue and exposes VM* prefixed components and method-based APIs. It is the default mobile UI layer used by capacitor-template.

Positioning

• Use @vup/ui-mobile for mobile-first and hybrid apps.
• Use @vup/ui for desktop web and admin-style apps.
• Prefer VM* components in business code instead of importing Ion* directly.
• Keep the package as a thin wrapper; business logic belongs in the application.

Technical Stack

• Vue 3 - Application framework (docs)
• Ionic Vue - Mobile UI and navigation primitives (docs)
• @ionic/vue-router - Ionic-compatible router integration (docs)
• Ionicons - Icon set for Ionic apps (docs)
• Capacitor - Native runtime for hybrid apps (docs)

Installation

vup use my-ui-mobile
# Select @vup/ui-mobile

Or install it directly in an app when needed:

pnpm add @vup/ui-mobile

Global Registration

import { createApp } from 'vue';
import App from './App.vue';
import VMUI from '@vup/ui-mobile';

const app = createApp(App);
app.use(VMUI);
app.mount('#app');

Router Requirement

When using VMRouterOutlet, create the router with @ionic/vue-router:

import { createRouter, createWebHistory } from '@ionic/vue-router';
import routes from './routes';

export default createRouter({
  history: createWebHistory(),
  routes,
});

Using plain vue-router for an Ionic page stack can trigger missing navManager or viewStacks injection warnings.

Page Structure

<template>
  <VMPage>
    <VMHeader>
      <VMToolbar>
        <VMTitle>Title</VMTitle>
      </VMToolbar>
    </VMHeader>

    <VMContent fullscreen>
      <!-- Business content -->
    </VMContent>
  </VMPage>
</template>

Keep VMToolbar inside VMHeader or VMFooter. Put cards, lists, and forms inside VMContent.

Common Components

• VMButton
• VMPage
• VMHeader, VMToolbar, VMTitle
• VMRouterOutlet
• VMContent
• VMList, VMItem
• VMCard, VMCardHeader, VMCardTitle, VMCardContent
• VMSegment, VMSegmentButton

Method-based API

import { VMAlert, VMLoading, VMToast } from '@vup/ui-mobile';

await VMToast('Saved successfully');
await VMAlert({ header: 'Notice', message: 'Done', buttons: ['OK'] });

const loading = await VMLoading({ message: 'Processing...' });
await loading.dismiss();

Related

• Packages Overview
• Capacitor Template
• @vup/ui Desktop Package
• Ionic Framework Documentation
• Ionic Vue Documentation
• Ionic Vue Router Documentation
• Ionicons Documentation
• Capacitor Documentation