Senior frontend coding rounds rarely ask for red-black trees. They ask you to write a debounce that handles the edge cases, orchestrate async work with a concurrency limit, build an accessible autocomplete in Vue in forty minutes, add a validated API route with a page that consumes it, or pair on a refactor while explaining your reasoning. The material is the everyday craft; the difference at senior level is that your code is correct on the edges, typed, tested in your head, and narrated.

Know

• Formats: utility-function problems (JavaScript fundamentals), async orchestration, Vue component or composable builds (live, in a sandbox or repo), Nuxt fullstack drills (route plus page plus state), algorithm questions at frontend depth (arrays, maps, trees, strings, DOM traversal), take-home assignments (a small app in a few hours), and pairing or code-review sessions (refactor, find the bug, add a feature to an existing codebase).
• The method for live coding: restate the problem and the edge cases, agree on the interface (signature, types, behaviour on empty input and errors), write the simplest correct version, walk through it with an example, then improve (complexity, cancellation, accessibility), and finish by naming what you would test. Narrate throughout; silence reads as being stuck.
• What is scored: correctness on edges (empty, one element, duplicates, unicode, null), clarity (naming, small functions, types), communication, handling of feedback, and knowledge of the platform (built-ins you reach for: structuredClone, Map, AbortController, Intl, Object.groupBy, Array.fromAsync, Promise.withResolvers).
• Vue-specific expectations: <script setup lang="ts"> with typed props and emits, defineModel, composables for logic, no reactivity leaks (toRef/toValue for arguments, cleanup in onScopeDispose), accessibility by default (labels, roles, keyboard), and awareness of SSR when the sandbox is Nuxt.
• Nuxt-specific expectations: useFetch/useAsyncData with keys, server/api with validation and createError({ status }), useState instead of module state, middleware for redirects, routeRules for caching, and nuxt-auth-utils for sessions.
• Take-home expectations: a README that explains decisions and trade-offs, tests where they matter, commits that tell a story, no over-engineering, and a "what I would do with more time" section.

How the pages fit

How it works

The five-step live-coding script, with a worked debounce:

1. Restate  "debounce(fn, wait) returns a function that delays fn until wait ms have passed without a call;
             each call resets the timer; the last arguments win; `this` is preserved; and it exposes cancel/flush."
2. Interface  function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T & { cancel(): void; flush(): void }
3. Simplest correct  timer + clearTimeout + setTimeout(fn.apply(this, args))
4. Walk through  calls at t=0, 50, 120 with wait=100 → fn runs once at t=220 with the t=120 args
5. Improve + tests  cancel, flush, leading option; tests with fake timers: resets, last-args, cancel, flush, `this`

export function debounce<T extends (...args: any[]) => void>(fn: T, wait: number) {
  let timer: ReturnType<typeof setTimeout> | undefined
  let pending: { args: Parameters<T>, self: unknown } | undefined

  const debounced = function (this: unknown, ...args: Parameters<T>) {
    pending = { args, self: this }
    clearTimeout(timer)
    timer = setTimeout(debounced.flush, wait)
  } as T & { cancel: () => void, flush: () => void }

  debounced.cancel = () => { clearTimeout(timer); timer = undefined; pending = undefined }
  debounced.flush = () => {
    if (!pending) return
    const { args, self } = pending
    debounced.cancel()
    fn.apply(self, args)
  }
  return debounced
}

Exercise

Be able to say