Loading and Error States

Async UX in Vue

Every async view should handle loading, error, empty, and success branches.

Skeletons and role="alert" improve perceived quality and a11y.

<p v-if="loading">Loading…</p>
<p v-else-if="error" role="alert">{{ error }}</p>
<p v-else-if="!items.length">No items</p>
<ul v-else>...</ul>

Four-state template branch.

Patterns

status enums, Suspense (async setup), toasts for mutations

• Handle loading and errors.
• Keep composables tested.
• Prefer TypeScript when you can.
• Measure before optimizing.

Loading and Error States Cheatsheet

Quick reference for patterns covered in this lesson.

Centralize

Composables can return { data, error, loading, reload }.

Common Mistakes

• Blank screens.
• console.error as the only feedback.

Key Takeaways

• Loading and Error States shows up often in Vue apps.
• Practice with a demo.
• Prefer clear APIs.
• Read official docs for edge cases.