Switch Vue components dynamically using the is binding and KeepAlive.
npx skills add https://github.com/PatternsDev/skills --skill dynamic-components
Please help me install this Agent Skill. Skill: dynamic-components Source: https://github.com/PatternsDev/skills/tree/main/vue/dynamic-components Command: npx skills add https://github.com/PatternsDev/skills --skill dynamic-components
Rendering different components based on runtime state without switching routes can complicate UIs and degrade user experience. This Skill provides a straightforward pattern to swap components using Vue's <component> element and the is binding, while optionally preserving state with KeepAlive.
Launch the Vue app and set currentTab to Home (or Feed/History) to see dynamic components render and switch without routing.
High-intent search queries and answers about installing and using this skill.
Switch Vue components dynamically without routing by binding the component definitions to a reactive selector and rendering the active view through Vue's <component> element with the is attribute.
Switch tabs and preserve user input state by rendering dynamic components inside Vue's <KeepAlive> wrapper, ensuring internal state remains intact when changing views without routing.
The Vue is attribute works for rendering dynamic components by accepting a component definition from a mapping object, instructing the <component> element to render the matching view based on runtime state.
Vue KeepAlive works with dynamic components to cache view state by optionally wrapping the <component> element, ensuring user inputs and internal state are preserved across view switches.
Use dynamic components instead of Vue Router for view switching when you need a lightweight single-page UI pattern, like tabs, without changing the URL or setting up a full routing configuration.
tanstack-skillsManage immutable reactive state with stores, derived values, and effects.
Stardust-liuInspect, add, remove, and invoke UnityEvent listeners on a GameObject.
pch007Render JSON specs into Vue 3 component trees with data binding.
Roy-wonjiCentralize SwiftUI navigation state with Hashable route enums and router-based deep links.
