Advanced Components in Vue.js

Advanced Components is the tenth chapter of the free Vue.js tutorial. It covers components that change, load late, move, animate or render without a template.

What each lesson covers:

  • Dynamic and Built-In Components: <component :is>, defineAsyncComponent with loading and error parts, code splitting, <KeepAlive>, <Teleport> for accessible modals, and the experimental <Suspense>.
  • Transitions and Animations: <Transition> and its classes, modes, CSS animations, JavaScript hooks, reusable transitions, <TransitionGroup>, state-driven animation and reduced motion.
  • Render Functions and Component Patterns: h() and VNodes, slots, lists and conditions in render functions, and presentational, container, controlled, headless and generic components.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

  1. Dynamic and Built-In Components

    Switching components with <component :is>, async components with defineAsyncComponent() and their loading, error, delay and timeout options, code splitting, <KeepAlive> with include, exclude, max and activation hooks, <Teleport> for modals and overlays with focus handling, and the experimental <Suspense>.

    • Switch between components with <component :is>
    • Load components later with defineAsyncComponent() and handle loading and errors
    • Keep component state alive with <KeepAlive>
    • Render modals in the right place with <Teleport>, and know what <Suspense> does
  2. Transitions and Animations

    The <Transition> component and its six CSS classes, named transitions, transition modes, CSS animations, custom class names, JavaScript hooks and :css="false", transitions between components, reusable transitions, <TransitionGroup> with keys, tag and move classes, state-driven animation and reduced motion.

    • Animate elements entering and leaving with <Transition> and its classes
    • Switch between elements and components with transition modes
    • Use JavaScript hooks and reusable transition components
    • Animate lists with <TransitionGroup> and animate numbers from state
  3. Render Functions and Component Patterns

    h() and virtual nodes, props, children, components, slots, lists and conditions in render functions, templates vs render functions and JSX, and component patterns: presentational and container components, controlled components, headless components and generic components with generic="T", and Vue components as web components with defineCustomElement.

    • Build a component's output with h() and a render function
    • Render props, children, slots, lists and conditions without a template
    • Choose between templates and render functions
    • Apply presentational, container, controlled, headless and generic component patterns