Ionic Vue Grundlagen: Native UI-Komponenten für Mobile Apps

1. Was Ionic Vue von reinen UI-Bibliotheken unterscheidet

Viele Vue-Entwickler kennen UI-Bibliotheken wie Vuetify oder Naive UI, die ein einheitliches Design-System für den Browser bereitstellen. Ionic Vue verfolgt einen anderen Ansatz: Statt eines einzigen, plattformunabhängigen Look-and-Feels passt sich jede Komponente automatisch an das Betriebssystem an, auf dem die App läuft. Ein Ionic-Button sieht auf iOS aus wie ein natives Cupertino-Element und auf Android wie ein natives Material-Design-Element, obwohl beide aus derselben Vue-Komponente gerendert werden.

Diese adaptive Darstellung basiert auf Web Components, die Ionic unter der Haube nutzt, gekapselt in Vue-3-kompatiblen Wrapper-Komponenten. Für den Vue-Entwickler bedeutet das: Man schreibt ganz normale Single File Components mit <ion-button> oder <ion-card> statt <button> oder <div>, und Ionic kümmert sich um die plattformspezifische Darstellung, Animationen und Interaktionsmuster im Hintergrund.

Der wesentliche Unterschied zu einer reinen CSS-Bibliothek liegt darin, dass Ionic Vue nicht nur Aussehen, sondern auch Verhalten liefert: Übergänge zwischen Seiten folgen iOS-typischen Slide-Animationen oder Android-typischen Fade-Animationen, Zurück-Gesten funktionieren wie in nativen Apps, und Tastatur-Interaktionen berücksichtigen Safe-Area-Insets automatisch. Diese Kombination aus Komponentenbibliothek, Navigationssystem und plattformspezifischem Verhalten macht Ionic Vue zu einer eigenständigen Kategorie zwischen reiner Web-UI und nativer Entwicklung.

2. Projekt-Setup: Ionic Vue mit Vite aufsetzen

Der Start mit Ionic Vue gelingt über das offizielle Ionic CLI, das ein vorkonfiguriertes Vite-Projekt mit Vue 3, Vue Router und der Ionic-Komponentenbibliothek generiert. Alternativ lässt sich Ionic Vue auch in ein bestehendes Vue-3-Projekt nachrüsten, indem die Kernpakete installiert und global registriert werden. Für neue Projekte ist die CLI-Variante empfehlenswert, weil sie sofort eine sinnvolle Ordnerstruktur mit Tabs-Navigation als Startpunkt mitbringt.

Zentral ist die Registrierung von IonicVue als Vue-Plugin in der main.js, zusammen mit dem Import der Ionic-CSS-Dateien für Basis-Styles, Typografie und Utilities. Ohne diese CSS-Importe fehlen sämtliche visuellen Grundlagen, weil Ionic die Basisdarstellung nicht wie klassische CSS-Frameworks über Klassen, sondern über Shadow-DOM-gekapselte Styles innerhalb der Web Components ausliefert.

# Scaffold a new Ionic Vue project with a tabs starter layout
npm install -g @ionic/cli
ionic start mironsoft-app tabs --type=vue

cd mironsoft-app
npm run dev

# Adding Ionic Vue to an existing Vue 3 + Vite project instead
npm install @ionic/vue @ionic/vue-router

// main.js — registering Ionic Vue and its base styles
import { createApp } from 'vue'
import { IonicVue } from '@ionic/vue'
import App from './App.vue'
import router from './router'

// Core Ionic CSS: required for typography, structure, utilities
import '@ionic/vue/css/core.css'
import '@ionic/vue/css/normalize.css'
import '@ionic/vue/css/structure.css'
import '@ionic/vue/css/typography.css'

const app = createApp(App).use(IonicVue).use(router)
router.isReady().then(() => {
  app.mount('#app')
})

3. Kernkomponenten: Pages, Header, Content, Cards

Die Grundstruktur jeder Seite in Ionic Vue folgt einem festen Muster: ion-page als äußerer Container, darin ion-header mit einer Toolbar für Titel und Aktionen, sowie ion-content als scrollbarer Bereich für den eigentlichen Seiteninhalt. Diese Struktur ist keine Konvention, sondern technisch notwendig, weil ion-content intern das Scroll-Verhalten, Pull-to-Refresh und die Tastatur-Anpassung übernimmt, die in einer normalen div-Struktur manuell nachgebaut werden müssten.

Für Inhalte innerhalb der Seite bringt Ionic Vue Komponenten wie ion-card, ion-list und ion-item mit, die typische Listenmuster nativer Apps abbilden, inklusive Swipe-to-Delete-Aktionen über ion-item-sliding. Diese Komponenten übernehmen automatisch die plattformspezifische Darstellung, sodass eine Liste auf iOS mit den gewohnten Trennlinien und auf Android mit Material-typischen Abständen erscheint, ohne dass der Entwickler diese Unterschiede selbst pflegen muss.

<!-- views/ProductListView.vue -->
<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Produkte</ion-title>
        <ion-buttons slot="end">
          <ion-button @click="openFilter">Filter</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-refresher slot="fixed" @ionRefresh="handleRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>

      <ion-list>
        <ion-item-sliding v-for="product in products" :key="product.id">
          <ion-item @click="openProduct(product)">
            <ion-label>
              <span class="item-title">{{ product.name }}</span>
              <p>{{ product.price }} €</p>
            </ion-label>
          </ion-item>
          <ion-item-options side="end">
            <ion-item-option color="danger" @click="removeFavorite(product)">Entfernen</ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

Dieses Beispiel zeigt bereits mehrere zentrale Bausteine von Ionic Vue im Zusammenspiel: Pull-to-Refresh über ion-refresher, Swipe-Aktionen über ion-item-sliding und eine Toolbar mit Titel und Aktionsbuttons. Alle diese Interaktionsmuster entsprechen exakt dem, was Nutzer aus nativen Apps gewohnt sind, ohne dass eigene Gesten-Erkennung oder Animationslogik implementiert werden muss.

4. Navigation-Stacks mit Ionic Router und Vue Router

Navigation in Ionic Vue unterscheidet sich von klassischer Web-Navigation, weil native Apps Seiten als Stack verwalten, nicht als einfachen Verlauf. Der IonRouterOutlet ersetzt das normale router-view von Vue Router und sorgt dafür, dass beim Navigieren zu einer neuen Seite die vorherige Seite im DOM erhalten bleibt, statt zerstört zu werden. Das ermöglicht die typischen iOS-Slide-Übergänge und stellt sicher, dass Scroll-Position und Formular-State beim Zurücknavigieren erhalten bleiben.

Für verschachtelte Tab-Navigation kombiniert Ionic Vue ion-tabs mit jeweils eigenen, unabhängigen IonRouterOutlet-Stacks pro Tab. Das bedeutet, jeder Tab behält seinen eigenen Navigationsverlauf, genau wie in nativen Tab-Bar-Apps: Wechselt man vom Tab "Produkte" zu "Konto" und zurück, erscheint wieder die zuletzt besuchte Unterseite im Produkte-Tab, nicht die Startseite.

// router/index.js — nested tabs with independent navigation stacks
import { createRouter, createWebHistory } from '@ionic/vue-router'

const routes = [
  {
    path: '/tabs/',
    component: () => import('@/views/TabsPage.vue'),
    children: [
      {
        path: 'products',
        component: () => import('@/views/ProductListView.vue'),
      },
      {
        path: 'products/:id',
        component: () => import('@/views/ProductDetailView.vue'),
      },
      {
        path: 'account',
        component: () => import('@/views/AccountView.vue'),
      },
    ],
  },
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

export default router

Programmatische Navigation läuft in Ionic Vue weiterhin über die vertraute useRouter-Composable von Vue Router, ergänzt um die Möglichkeit, die Navigationsrichtung explizit zu steuern. Mit router.push({ path: '/tabs/products/42' }) navigiert man vorwärts mit der passenden Slide-Animation, während router.back() automatisch die Rückwärts-Animation auslöst, ganz ohne manuelle Transition-Konfiguration.

5. Formulare und Eingabekomponenten richtig einsetzen

Formulare in Ionic Vue nutzen Komponenten wie ion-input, ion-select und ion-checkbox, die zwar wie native HTML-Elemente funktionieren, aber intern als Web Components mit eigenem Shadow DOM implementiert sind. Für die Datenbindung funktioniert v-model auf allen Ionic-Formularkomponenten identisch zu normalen HTML-Elementen, weil Ionic die notwendigen ionChange- und ionInput-Events intern auf das Vue-Reaktivitätssystem abbildet.

Eine Besonderheit betrifft die native Tastatur-Interaktion: ion-input unterstützt native Eingabetypen wie tel, email oder number, die auf dem Gerät automatisch die passende virtuelle Tastatur einblenden. Zusätzlich bringt Ionic Vue mit ion-datetime und ion-picker plattformspezifische Auswahlkomponenten mit, die sich auf iOS wie ein natives Wheel-Picker-Element und auf Android wie ein Material-Dialog verhalten.

<!-- Native-feeling form with two-way binding via v-model -->
<ion-list>
  <ion-item>
    <ion-label position="stacked">E-Mail</ion-label>
    <ion-input v-model="form.email" type="email" placeholder="name@firma.de"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="stacked">Kategorie</ion-label>
    <ion-select v-model="form.category" interface="action-sheet">
      <ion-select-option value="electronics">Elektronik</ion-select-option>
      <ion-select-option value="clothing">Kleidung</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>Benachrichtigungen aktivieren</ion-label>
    <ion-toggle v-model="form.notifications"></ion-toggle>
  </ion-item>
</ion-list>

6. Adaptive Theming: iOS-Look und Material-Look aus einer Codebasis

Das Theming-System von Ionic Vue basiert auf CSS-Custom-Properties, die pro Farbrolle definiert werden, etwa --ion-color-primary oder --ion-color-danger, jeweils mit passenden Kontrast- und Schattierungswerten. Diese Variablen lassen sich global in einer variables.css überschreiben, um das Corporate Design des Kunden abzubilden, ohne einzelne Komponenten anzufassen. Alle Ionic-Komponenten greifen automatisch auf diese Variablen zu.

Für den Unterschied zwischen iOS und Android nutzt Ionic Vue das Attribut mode, das global über die Ionic-Konfiguration oder pro Komponente gesetzt werden kann. Im Modus ios erscheinen Schatten dezenter, Schriftarten folgen San Francisco, und Übergänge sind Slide-basiert. Im Modus md (Material Design) erscheinen stärkere Elevation-Schatten, Ripple-Effekte bei Klicks und Fade-Übergänge. Standardmäßig erkennt Ionic die Plattform automatisch anhand des User Agents und wählt den passenden Modus selbst.

/* theme/variables.css — corporate color palette applied to all Ionic components */
:root {
  --ion-color-primary: #16a34a;
  --ion-color-primary-rgb: 22, 163, 74;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-shade: #138a3f;
  --ion-color-primary-tint: #2fb85c;

  --ion-color-danger: #dc2626;
  --ion-color-danger-rgb: 220, 38, 38;
}

/* Force a specific platform mode for a single component, if needed */
ion-button.force-material {
  --border-radius: 4px;
}

7. Native Gesten und Interaktions-Komponenten

Neben statischen UI-Komponenten liefert Ionic Vue auch fertige Gesten-Interaktionen, die sonst aufwendig selbst implementiert werden müssten. ion-infinite-scroll lädt automatisch weitere Daten nach, sobald der Nutzer das Ende einer Liste erreicht. ion-reorder-group ermöglicht Drag-and-Drop-Umsortierung von Listen per Touch-Geste, inklusive der nativen Haptik-Rückmeldung auf unterstützten Geräten.

Für komplexere, custom Gesten stellt Ionic zusätzlich die createGesture-API bereit, die auf demselben Gesture-Erkennungssystem basiert, das auch die internen Ionic-Komponenten nutzen. Damit lassen sich eigene Swipe-, Pan- oder Pinch-Interaktionen implementieren, die sich nahtlos in bestehende Ionic-Navigation einfügen, ohne mit den eingebauten Zurück-Gesten in Konflikt zu geraten.

// composables/useSwipeToClose.js
import { onMounted, onBeforeUnmount } from 'vue'
import { createGesture } from '@ionic/vue'

export function useSwipeToClose(elementRef, onClose) {
  let gesture

  onMounted(() => {
    gesture = createGesture({
      el: elementRef.value,
      gestureName: 'swipe-to-close',
      direction: 'y',
      onEnd: (detail) => {
        if (detail.deltaY > 120) onClose()
      },
    })
    gesture.enable()
  })

  onBeforeUnmount(() => gesture?.destroy())
}

8. Zusammenspiel mit Capacitor für native Funktionen

Ionic Vue liefert UI-Komponenten und Navigation, aber keinen Zugriff auf native Gerätefunktionen wie Kamera oder Push-Benachrichtigungen. Für diesen Teil kombiniert man Ionic Vue standardmäßig mit Capacitor, dem nativen Runtime-Layer aus demselben Ionic-Ökosystem. Diese Kombination ist kein Zufall: Beide Projekte werden vom selben Team entwickelt und sind gezielt aufeinander abgestimmt, sodass Ionic-UI-Komponenten und Capacitor-Plugins ohne zusätzliche Integrationsschicht zusammenarbeiten.

In der Praxis bedeutet das: Ein Formular mit ion-input sammelt Nutzereingaben, ein Capacitor-Plugin wie @capacitor/camera liefert ein aufgenommenes Foto, und eine ion-card zeigt das Ergebnis an, alles innerhalb derselben Vue-Komponente und ohne Bruch zwischen UI-Schicht und nativer Schicht. Für Teams, die sowohl natives Look-and-Feel als auch nativen Funktionszugriff benötigen, ist die Kombination aus Ionic Vue und Capacitor die naheliegendste Wahl im Vue-Ökosystem.

9. Ionic Vue im Vergleich zu eigenem Tailwind-UI

Die Entscheidung zwischen Ionic Vue und einer selbst gebauten UI-Schicht mit Tailwind hängt stark davon ab, wie stark natives Verhalten und plattformspezifisches Aussehen gewünscht sind, gegenüber vollständiger gestalterischer Freiheit und minimalem Bundle-Overhead.

Für Business-Apps mit Standard-Mustern wie Listen, Formularen und Tab-Navigation liefert Ionic Vue den schnelleren Weg zu einem produktionsreifen Ergebnis, das sich sofort nativ anfühlt. Sobald ein Projekt jedoch ein stark individuelles, markengeprägtes Design verlangt, das von den nativen Plattform-Konventionen bewusst abweicht, wird ein eigenes Tailwind-basiertes Design-System oft die bessere Grundlage, weil es keine Kompromisse mit vorgegebenen Ionic-Strukturen eingeht.

10. Zusammenfassung

Ionic Vue löst ein anderes Problem als reine CSS-Frameworks: Es liefert nicht nur Aussehen, sondern auch Navigation-Verhalten, Gesten und plattformspezifische Interaktionsmuster, die sich automatisch an iOS oder Android anpassen. Die feste Struktur aus ion-page, ion-header und ion-content übernimmt Scroll-Verhalten und Safe-Area-Handling, während IonRouterOutlet echte Navigation-Stacks mit erhaltenem Component-State ermöglicht.

Theming über CSS-Custom-Properties erlaubt Corporate-Branding, ohne einzelne Komponenten anzufassen, und die Kombination mit Capacitor schließt die Lücke zu nativen Gerätefunktionen. Für Business-Apps mit klassischen Mustern wie Listen, Formularen und Tab-Navigation ist Ionic Vue der schnellste Weg zu einer App, die sich auf beiden Plattformen nativ anfühlt, ohne zwei getrennte UI-Implementierungen pflegen zu müssen.

11. FAQ: Ionic Vue Grundlagen