VUE
115 bites tagged VUE — interview questions with model answers, and 60-second explainers.
How do you pass markup from a parent to a child component?
This tests declarative composition for UI reuse. A strong answer covers default and named slot syntax in Vue/Svelte (slot outlet, v-slot) or Angular ng-content with select for named projection.
Explain key or trackBy in list rendering and index key risks
Your understanding of virtual DOM reconciliation and stable element identity. A good answer covers that key binds DOM state to data identity, and that index keys break reordering by recycling wrong components.
Explain two-way data binding and provide input binding syntax
Tests whether you see two-way binding as sugar for value binding plus an input event. Strong answer: show one syntax, then explain the prop-out, event-in pattern. Red flag: syntax only with no mention of change detection or unidirectional flow.
How do you conditionally render Login/Logout with isLoggedIn in Vue or Angular?
This tests DOM lifecycle awareness versus CSS toggling. A strong answer uses v-if/*ngIf for infrequent changes that need cleanup, and v-show/[hidden] for frequent toggles that should stay mounted. A red flag is treating them as interchangeable.
How do Vue and Angular detect nested object mutations?
Tests deep reactivity vs reference-based detection. Vue 3 Proxies catch nested mutations; Angular Default checks on zone ticks and OnPush misses same-reference changes. Fix via immutability, deep watchers, or ngDoCheck.
Architect a headless Toggle with scoped slots
This tests decoupling logic from markup via scoped slots. A strong answer exposes on and toggle through a single default scoped slot, renders no DOM, and cites UI flexibility. A red flag is using config props or CSS classes to control layout.
Implement a scoped slot pattern in a reusable DataList
It tests delegating rendering while keeping data ownership in the child. A strong answer covers a DataList that fetches internally and exposes rows via slot props, plus Angular TemplateRef via let-item. Red flag: parent loops or slots inheriting child scope.
What bindings do v-model and ngModel sugar, and why?
V-model sugars value and input; ngModel sugars [value] and (ngModelChange). This enforces one-way data flow for predictable state. If you know two-way binding is property binding plus an event.
How do you emit events from a child to parent component?
This probes unidirectional data flow and child-to-parent event emission. In Vue, call $emit with a named event and payload; in Angular, use @Output with EventEmitter and emit the query. A red flag is suggesting two-way binding or direct parent mutation.
Primary mechanism for passing data from parent to child component
Tests unidirectional parent-to-child data flow and explicit component contracts. A strong answer names props or inputs, explains one-way binding, and warns against direct child mutation. Red flag: confusing props with global state or events.
How do you configure Vite Library Mode for ESM and UMD outputs?
Tests Vite Library Mode multi-format packaging. Strong answer: build.lib entry, formats es and umd, fileName function, and rollupOptions.output.globals for Vue. Red flag: multiple configs or omitting UMD global name.
Why does create-vue ask about Pinia and Vitest during scaffolding?
Tests knowledge of Vue's lean core and modular tooling. Good answers note that create-vue conditionally installs deps, scaffolds folders like src/stores or tests/, and pre-configures Vite so you skip manual wiring.
Svelte compiler downsides vs Vue and Angular runtime
Tests compile-time versus runtime trade-offs in large apps. Strong answers address dynamic component limits, plugin friction, build scalability, and migration cost. Red flag: claiming Svelte has no runtime or that dynamic components are impossible.
How would Angular vs Vue philosophies influence your large-scale architecture choice?
Tests mapping philosophy to team scale. Contrast Angular's opinionated batteries-included tooling and two-way binding with Vue's progressive incremental adoption and Composition API; pick Angular for standards or Vue for flexibility.
Why is DI central to Angular architecture versus Vue's module system?
Tests architectural grasp of inversion of control. Angular DI enables hierarchical injectors, tree-shakable providers, and runtime substitution without direct imports unlike Vue modules. Red flag: calling DI mere convenience or claiming Vue matches Angular DI.
Compare and contrast Vue 3 and Svelte reactivity systems
Tests runtime versus compile-time trade-offs. Contrast Vue 3 Proxy interception with Svelte compile-time assignment transforms. Vue tracks dependencies dynamically during effects; Svelte resolves them at build. Red flag: claiming both use runtime Proxies.
What out-of-the-box Angular features require manual setup in Vue or Svelte?
Tests whether you understand framework scope tradeoffs. A strong answer cites first-party routing, forms, dependency injection, and Signals, then contrasts them with Vue or Svelte's add-on ecosystem.
Explain Vue as a progressive framework and build-step differences
Tests incremental adoptability. Strong answers define progressive as layer-by-layer adoption, describe script-tag HTML enhancement, and contrast it with compiled SFC SPA toolchains. Red flag: calling Vue lightweight rather than incrementally adoptable.
Virtual DOM Diffing: Minimal DOM Surgery
Virtual DOM diffing finds the smallest real DOM ops to sync a lightweight tree with new state. Frameworks batch rapid UI changes instead of repainting everything. The footgun is treating the diff as free; missing keys in lists force expensive reconciliation.
Nuxt Server Routes: Your Backend in a Folder
Nuxt Server Routes let you build a backend inside your frontend project. Create API endpoints by adding files to the `server/api` directory, which automatically get an `/api` prefix. The common footgun is forgetting this prefix difference with `server/routes`.
SSR Hydration: Bringing Static Pages to Life
Hydration attaches JavaScript interactivity to a static HTML page sent from a server. It's used in Server-Side Rendering (SSR) frameworks to make the initial fast-loading page interactive.
Lazy Loading Routes: Faster Initial Loads
Lazy loading routes splits your app into smaller chunks, loading code only when a user visits a specific page. This drastically cuts initial load times for large SPAs. Just be sure not to use Vue's async components directly as route components.
Declarative Route Configuration in Vue
Declarative routing maps URL paths to components like a switchboard. You define a list of routes, and the framework renders the correct view when the URL changes. This is standard for SPAs.
Container vs. Presentational: A Component Separation Pattern
Split components into 'smart' containers that handle data and logic, and 'dumb' presentational components that just render UI. This lets you reuse state across different views, like showing a product list in a grid or a table.
Get VUE bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.