- Vue – Async Components, Suspense and KeepAlive
Not shipping everything on the first load. `defineAsyncComponent` with loading and error components, route-level code splitting and what Vite actually emits, `<Suspense>` and its still-experimental status, and `<KeepAlive>` for the tab or list that should not throw away its state and refetch every time you navigate back to it.
- Vue – Transitions and Teleport
Two small features that solve disproportionately annoying problems. `<Transition>` and the six CSS classes it toggles, `<TransitionGroup>` for a list that gains and loses items — the toast stack — and `<Teleport>`, which renders a modal at the end of `<body>` so it stops being clipped by whatever `overflow` and `z-index` its parent happened to set.
- Vue – Fetching Data from an API
Talking to a backend without scattering `fetch` through thirty components. One module that owns the transport, loading and error state that the UI can actually render, a typed error that separates "the API is down" from "your password is wrong", attaching a JWT and handling a 401 in exactly one place, and the mock implementation that lets the UI be built before the API exists.
- Vue – Forms and Validation
A real form, end to end. Binding every input type, a submit handler that cannot double-fire, disabling the button while a request is in flight, client-side checks and why they are a convenience rather than a guarantee, and — the part tutorials skip — rendering the field errors the server sends back next to the fields they belong to.
- Vue – Route Guards and Navigation
Deciding who gets in. `beforeEach` and returning a redirect, `meta` fields that mark a route as needing auth or an admin role, sending someone to the login page and bouncing them back to where they were going, `afterEach` for the document title, per-route and in-component guards, and `scrollBehavior` — including when to switch it off.