skills.rest
e-xode
e-xodeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vue3-builtin-components

Configure Vue 3 Teleport, Suspense, KeepAlive, and Transition behaviors for SSR applications.

3|Updated Jan 14, 2023
Search Tags:#suspense#ssr#hydration#keep-alive#vue 3#teleport#transitiongroup
One-click install
npx skills add https://github.com/e-xode/vue-ssr --skill vue3-builtin-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue3-builtin-components
Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vue3-builtin-components
Command: npx skills add https://github.com/e-xode/vue-ssr --skill vue3-builtin-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you implement Vue UI mechanics—portals, async boundaries, cached components, and transitions—without fighting SSR hydration or incorrect component behavior.

Core Features & Use Cases

  • Teleport: Render modals/overlays at the body (or another DOM target) to escape overflow/z-index/transform constraints.
  • Suspense: Display a loading fallback while async setup or async components resolve, with SSR-aware expectations.
  • KeepAlive: Cache swapped components (including router-driven views) to preserve state across navigation.
  • Transition / TransitionGroup: Animate enter/leave and list reorder with CSS classes (and optional JS hooks) plus SSR caveats.

Common use cases include custom overlays, view swaps between routes, async-component loading states, and animating dynamic lists.

Quick Start

Use the vue3-builtin-components skill to wire Teleport/Suspense/KeepAlive/Transition correctly in a Vue 3 SSR page that needs a custom modal, an async loading fallback, cached views, and animated enter/leave behavior.

Frequently Asked Questions about vue3-builtin-components

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

FAQPage Schema
How do I use Vue Teleport for modals without breaking SSR hydration?▼

Vue Teleport renders overlays outside layout constraints for SSR applications. It requires correct DOM target assumptions and SSR-safe toggles to escape overflow or z-index constraints without causing hydration mismatches.

What's the best way to handle async component loading states in Vue 3 SSR?▼

Handle async component loading in Vue 3 SSR using Suspense to display a fallback UI during resolution. It requires SSR-aware expectations to correctly defer rendering until async setup completes without breaking hydration.

How does KeepAlive caching work for swapped router views in Vue 3?▼

KeepAlive caches swapped router views using explicit caching semantics to preserve component state across navigation. It maintains view state during swaps without re-initializing components, requiring correct include or exclude matching.

Can I use TransitionGroup for list reorder animations in a Vue SSR app?▼

TransitionGroup animates list reorders with CSS classes and optional JS hooks in Vue SSR apps. It requires transition class naming, key discipline, and defers animation class bodies to the project SCSS design system to avoid hydration issues.

Does Vue 3 Suspense support fallback UIs during server-side rendering?▼

Vue 3 Suspense supports fallback UIs during server-side rendering by resolving async boundaries with SSR-aware expectations. It manages async setup resolution safely, ensuring fallback content displays correctly before hydration completes.

Why are my Vue Transition classes not applying correctly during SSR hydration?▼

Vue Transition classes fail during SSR hydration when transition class naming or key discipline is incorrect. Ensure explicit CSS class definitions exist in your SCSS design system and apply SSR-safe toggles for enter and leave animations.

Related Skills

Explore More Software Engineering Skills→
bingeli1379bingeli1379
2

vue-debug-guides

Diagnose runtime errors, warnings, async failures, and SSR hydration issues in Vue 3 components.

Community
Advanced
vincehvinceh
1

vue-engineering

Guide Vue 3 component creation with Composition API and script setup.

Community
Advanced
cslsoftwarescslsoftwares

developer-vuejs-routing-state

Configure Vue Router and Pinia with guards and lazy loading.

Community
Intermediate
rafasoaresrafasoares

vue

Create Vue 3 single-file components using script setup and Composition API.

Community
Intermediate