Guide Ionic Vue projects through IonPage, IonRouterOutlet, and IonTabs navigation patterns.
npx skills add https://github.com/capawesome-team/skills --skill ionic-vue
Please help me install this Agent Skill. Skill: ionic-vue Source: https://github.com/capawesome-team/skills/tree/main/skills/ionic-vue Command: npx skills add https://github.com/capawesome-team/skills --skill ionic-vue
This Skill helps developers implement Ionic Vue architecture patterns for scalable, maintainable apps by standardizing project structure, components, and navigation.
Follow the guide to scaffold an Ionic Vue project and apply the patterns described to build pages with IonPage and router-based navigation.
High-intent search queries and answers about installing and using this skill.
Ionic Vue routing uses IonRouterOutlet for navigation stack management and IonTabs for tab-based interfaces. Wrap page components in IonPage to ensure consistent lifecycle hooks and proper transition animations across web and native platforms.
Yes, IonPage is required for every routed screen to enable Ionic Vue lifecycle hooks and transitions. Using IonPage as the root component ensures proper view lifecycle management and correct integration with IonRouterOutlet navigation.
Ionic Vue lifecycle hooks such as onIonViewWillEnter trigger when navigating to a page wrapped in IonPage. These composables manage view-specific logic separately from standard Vue component mounting and unmounting cycles.
Use the useIonRouter composable for Ionic Vue navigation to ensure proper transition animations and platform-aware behavior. While Vue Router manages routes, useIonRouter handles the native-style navigation stack and transitions.
Yes, Ionic Vue provides composables that detect the current platform to apply specific logic for web and native environments. These patterns ensure your cross-platform app adapts its behavior correctly across different deployment targets.
Page transitions fail when screens lack the IonPage root component or use standard Vue Router navigation instead of useIonRouter. Ensure explicit component imports from @ionic/vue and wrap every routed page in IonPage.
SoltusGuide Ionic Vue development covering project structure, components, navigation, and lifecycle hooks.
mefardalesGuide Ionic Framework development for cross-platform mobile and web apps.
clerkImplement Clerk authentication in Vue 3 with composables, router guards, and Pinia.
yeohj0710Guide developers in building native-looking mobile apps with Ionic UI components.
