skills.rest
involvex
involvexCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ionic-vue

Guides Ionic Vue development covering components, routing, lifecycle hooks, and composables.

1|Updated Aug 25, 2026
Search Tags:#routing#vue#mobile development#lifecycle hooks#composables#ionic#capacitor
One-click install
npx skills add https://github.com/involvex/ionic-everywhere --skill ionic-vue-involvex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ionic-vue
Source: https://github.com/involvex/ionic-everywhere/tree/main/.agents/skills/ionic-vue
Command: npx skills add https://github.com/involvex/ionic-everywhere --skill ionic-vue-involvex

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building Ionic apps with Vue requires framework-specific knowledge — IonPage requirements, Ionic lifecycle hooks that differ from Vue's standard hooks, tab-based routing with nested outlets, and composables like useIonRouter. This Skill provides structured guidance so the agent generates correct Ionic Vue code and diagnoses common Vue-specific issues. ## Core Features & Use Cases - Project Analysis and Setup: Auto-detects Ionic, Vue, and Capacitor versions, TypeScript usage, platforms, and router configuration from project files before generating code. - Component and Navigation Patterns: Covers IonPage, IonRouterOutlet, IonTabs, overlays (modals, alerts, action sheets), v-model bindings, declarative and programmatic navigation, and lazy-loaded routes. - Lifecycle and Composables: Explains onIonViewWillEnter/DidEnter/WillLeave/DidLeave, useIonRouter, useBackButton, useKeyboard, and isPlatform platform detection. - Troubleshooting: Diagnoses issues like missing IonPage breaking transitions, lifecycle hooks not firing, $el access for Web Component methods, and kebab-case event naming. - Use Case: Ask the agent to add a detail page with tab-based navigation to an existing Ionic Vue app, and it will generate the route, lazy-loaded component, and IonPage-wrapped view matching your project's Composition API style. ## Quick Start Ask the agent to add a new routed page with Ionic lifecycle hooks and tab navigation to your Ionic Vue project.

Frequently Asked Questions about ionic-vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up navigation in an Ionic Vue app?▼

Import createRouter from @ionic/vue-router rather than vue-router, define routes with lazy-loaded components, and navigate using router-link attributes or the useIonRouter composable. The Ionic router wrapper enables page transitions and stack management.

How do Ionic lifecycle hooks work in Vue?▼

Ionic provides onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, and onIonViewDidLeave, which fire on every page visit because IonRouterOutlet caches pages in the DOM. They require IonPage as the root element and only fire on router-mapped components, unlike Vue's onMounted which fires once.

Why are my Ionic Vue page transitions not working?▼

Page transitions fail when the routed component does not use IonPage as its root template element. IonPage is required for transitions, lifecycle hooks, and proper flexbox layout with headers and tab bars.

How do I call methods on Ionic components in Vue?▼

Access the underlying Web Component through the $el property on the Vue ref, for example contentRef.value.$el.scrollToBottom(300). Calling the method directly on the ref fails because the ref wraps the Vue component instance, not the DOM element.

Can I use v-model with Ionic Vue form components?▼

Yes, @ionic/vue provides Vue wrappers that support v-model on IonInput, IonToggle, IonSelect, IonCheckbox, and IonRange. Events in templates must use kebab-case names such as @ion-change.

When should I not use this Ionic Vue guidance?▼

Do not use it for general Ionic theming or CLI usage, creating a new Ionic app, Capacitor-only Vue patterns without Ionic Framework, Ionic version upgrades, or non-Vue frameworks like Angular or React.

Related Skills

Explore More Software Engineering Skills→
capawesome-teamcapawesome-team
37

capacitor-app-creation

Scaffold a new Capacitor app and configure appId, appName, and webDir.

Official
Intermediate
nihalnihalaninihalnihalani

jac-mobile-app

Package Jac client applications as native Android and iOS apps using Capacitor.

Community
Intermediate
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate
Cap-goCap-go
58

ionic-design

Guide Ionic component usage and theming for Capacitor-based mobile apps.

Official
Intermediate