Vue interview

Train

Built-ins and tooling

KeepAlive and its cache, Teleport for modals, what Suspense waits for, Vite versus webpack and Rolldown in Vite 8, how Vue Router works, and what Pinia adds over a shared reactive object.
KeepAliveTeleportSuspenseWhy ViteVue RouterPinia

From your Built-in components and Scaling up notes and the bundling part of Important.

Know

  • KeepAlive: caches instances instead of unmounting; onActivated (also on first mount) and onDeactivated (also on unmount); max drops the least recently used instance; include/exclude match component names.
  • Teleport: renders content elsewhere in the DOM while it stays in the component's tree; for modals, toasts, tooltips.
  • Suspense: waits for async setup (top-level await) and defineAsyncComponent, shows #fallback until then; doesn't react to fetches in onMounted; no error slot.
  • TransitionGroup: enter and leave classes for items added and removed, v-move for items that change position.
  • Vite: unbundled ES modules in development, pre-bundled dependencies, fast HMR; production builds split into chunks. Since Vite 8, Rolldown (Rust) is the one bundler for development and production.
  • Vue Router: History API, route table, lazy routes as separate chunks, navigation guards, <RouterView>/<RouterLink>, current route in a shallow ref.
  • Pinia: per-request stores and hydrated state with SSR, DevTools, HMR, plugins, testing helpers.

Fact check of your notes

Gotcha· Vite 8 already uses Rolldown for both

"Vite now uses esbuild on dev and Rollup in prod" describes Vite 7 and older. Since Vite 8, Rolldown is the bundler in development and production, which removed that mismatch.

Gotcha· KeepAlive drops the least recently used instance

"If the number is reached, the last used instance is unmounted": it's the least recently used one. And :include="MyComponent" binds a variable; pass the name as a string, include="MyComponent", or a regex or an array.

Gotcha· v-move is for moving items

TransitionGroup's v-move class animates items that change position. Items being added or removed use the enter and leave classes.

Gotcha· Smaller slips

Suspense waits for defineAsyncComponent, not useAsyncComponent. <NuxtLink> prefetches when the link becomes visible in the viewport by default, not on hover. And a statically generated page still hydrates and is fully interactive; what's static is the HTML built ahead of time.

Exercise

Exercise
  • Build tabs with <KeepAlive :max="2">, log onActivated and onDeactivated, and switch between three tabs to see which instance gets dropped.
  • Put a modal inside a card with overflow: hidden, see it clipped, then fix it with <Teleport to="body">.

Be able to say

Be able to say· Why is Vite fast in development?

"It doesn't bundle my code in development. It serves source files as native ES modules and transforms each one only when the browser asks for it, so start-up doesn't depend on the size of the app and HMR swaps one module. Dependencies are pre-bundled once. For production it builds a bundle split into chunks, and since Vite 8 that's done by Rolldown, the same bundler as in development."

Your notes

Open in Notes

Nothing yet. Notes filed here show up on this page and the section overview.

Reusability

Composables and how to write good ones, the shared-state trap of module-level refs, a useFetch composable with cancellation, custom directives and when to use them, and Vue plugins.

Performance, accessibility and security

Measuring and fixing a slow Vue app — lazy loading, shallowRef, computed, v-once and v-memo, virtual lists — accessibility in a single-page app, and XSS with v-html.