Top 30 Vue, Angular & Svelte Interview Questions and Answers
30 multiple-choice questions on Vue, Angular & Svelte, of the kind that come up in a technical interview, drawn from 30 bites in the Vue, Angular & Svelte library. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
Vue 3, Nuxt, Angular, Svelte, SvelteKit
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
Which approach correctly applies Vue's progressive philosophy to a legacy server-rendered page?
Show the answer
Answer: b · Dropping in a CDN script tag to enhance one form, then migrating that component to a Vite SFC later
Vue is progressive because it supports incremental adoption, letting you enhance one element with a CDN script and later scale to a compiled SFC project. Option A is a common misconception because progressive refers to layer-by-layer adoptability, not a small bundle size.
Read the full bite: Explain Vue as a progressive framework and build-step differences
Question 2 of 30
Which built-in Angular module is specifically designed for handling user input and validation, a capability that Vue and Svelte projects typically address through external libraries such as VeeValidate or FormKit?
Show the answer
Answer: a · Template-driven and reactive forms
Angular ships template-driven and reactive forms with built-in validators as a first-party module, while Vue and Svelte generally rely on community libraries like VeeValidate or FormKit for equivalent functionality. NgRx is the most tempting distractor because it is a third-party state management library, not a built-in Angular feature.
Read the full bite: What out-of-the-box Angular features require manual setup in Vue or Svelte?
Question 3 of 30
How does Svelte's compiler-first design most directly improve the end-user experience compared to virtual DOM frameworks?
Show the answer
Answer: a · It shifts work to build time, producing smaller bundles and less browser CPU work for faster page loads.
Svelte's compiler generates imperative vanilla JavaScript at build time, which shrinks bundles and eliminates virtual DOM diffing overhead for end users. Option D describes a developer experience benefit, not a user-facing performance improvement.
Read the full bite: What is the primary end-user benefit of Svelte's compiler-first approach?
Question 4 of 30
When a reactive variable changes in Svelte, how is the update triggered differently than in Vue 3's runtime Proxy system?
Show the answer
Answer: a · By compiler transforms that turn assignments into explicit update calls
Svelte resolves dependencies at build time by transforming assignments into explicit update logic in the compiled output, so no runtime tracker is needed. Option B is tempting because Vue 3 uses runtime Proxies, but Svelte does not use them at all.
Read the full bite: Compare and contrast Vue 3 and Svelte reactivity systems
Question 5 of 30
Why does Angular treat dependency injection as a runtime architectural layer rather than relying on ES module imports like Vue?
Show the answer
Answer: c · It enables runtime resolution of service lifetimes and implementation swapping without changing consumer code or direct file coupling.
Angular's DI is a runtime inversion-of-control system that supports scoped lifetimes, tree-shakable providers, and test-time substitution without modifying consumer code. The boilerplate distractor is wrong because DI still requires constructor declarations; its architectural value lies in runtime indirection and hierarchical resolution, not syntax savings.
Read the full bite: Why is DI central to Angular architecture versus Vue's module system?
Question 6 of 30
When reactive state changes in a Svelte component, how does the compiled application update the browser DOM?
Show the answer
Answer: d · It executes pre-generated imperative statements that directly mutate the affected DOM nodes.
Svelte compiles components into imperative vanilla JavaScript that retains direct references to DOM nodes and executes precise update statements when state changes, so no intermediate tree is ever created. The distractor suggesting a hidden virtual DOM is wrong because the compiler deliberately avoids emitting any diffing or reconciliation runtime, generating direct DOM manipulation code instead.
Read the full bite: How does Svelte update the DOM without a Virtual DOM?
Question 7 of 30
Why does Vue's architectural philosophy make it the better choice for gradually modernizing a ten-year-old monolith one module per quarter?
Show the answer
Answer: b · Vue's progressive nature allows incremental adoption via the Composition API without requiring a full rewrite.
The card describes Vue as progressive and ideal for incremental adoption without full rewrites, using the Composition API for modular development. Distractor C incorrectly attributes Angular's built-in standardization to Vue, when in fact Vue's flexibility requires stronger platform discipline to prevent fragmentation.
Question 8 of 30
When building a no-code canvas where users assemble layouts from hundreds of possible components at runtime, what is a concrete downside of Svelte's compile-time model versus Vue or Angular?
Show the answer
Answer: d · Svelte must eagerly import all possible dynamic targets, sacrificing tree-shaking and reintroducing runtime overhead through escape hatches like svelte:component.
The correct answer notes that Svelte requires eager imports and runtime escape hatches for open-ended dynamic sets, which reintroduces overhead and sacrifices tree-shaking. Distractor A is tempting because Svelte does compile to imperative DOM operations, but dynamic components are still possible via compiler-aware patterns rather than impossible.
Read the full bite: Svelte compiler downsides vs Vue and Angular runtime
Question 9 of 30
You need to generate deployable files to upload to a web server. Why should you use ng build instead of ng serve?
Show the answer
Answer: c · ng build writes the compiled output to the dist/ folder, while ng serve keeps the build in memory and starts a dev server
ng build writes static files to the dist/ folder for deployment, while ng serve keeps output in memory and runs a dev server. Many beginners incorrectly think ng serve also writes files to disk, but it never produces disk output.
Read the full bite: ng serve purpose and fundamental difference from ng build
Question 10 of 30
What does create-vue's practice of asking about Pinia and Vitest reveal about Vue's overall framework design?
Show the answer
Answer: a · Vue prefers to keep its runtime core small and let developers opt into official ecosystem tools only when needed.
This reflects Vue's intentional design as a lean runtime with an opt-in ecosystem, keeping bundle sizes down and avoiding forced opinions. Distractor D is tempting because it suggests flexibility, but the prompts are one-time scaffolding decisions that permanently shape the project skeleton and lockfile, not runtime toggles.
Read the full bite: Why does create-vue ask about Pinia and Vitest during scaffolding?
Question 11 of 30
You place a helper component named utils.svelte inside src/routes/dashboard/. What is true about its routing behavior?
Show the answer
Answer: a · It does not create a route because SvelteKit requires the plus prefix for route files
SvelteKit only treats files starting with + as route files, so utils.svelte is ignored for routing and does not create a page. Option C reflects the common misconception that any .svelte file inside src/routes automatically becomes a public route.
Read the full bite: How does src/routes determine routing in SvelteKit?
Question 12 of 30
To avoid CORS errors when calling a local backend from an Angular app in development, what should you do?
Show the answer
Answer: a · Create a proxy file, register it under serve proxyConfig in angular.json, and restart ng serve
The Angular CLI dev server proxies requests to the backend only when you register a proxy configuration file in angular.json under the serve target and restart ng serve. Changing environment.ts to hit the backend directly does not resolve CORS because the browser still sees a cross-origin request.
Read the full bite: How do you configure Angular CLI dev server proxying?
Question 13 of 30
Why does Vite pre-bundle an ESM package like lodash-es during development?
Show the answer
Answer: b · To collapse hundreds of internal ESM files into a single module and avoid an HTTP request waterfall.
Pre-bundling lodash-es merges its hundreds of tiny ESM files into one module, preventing a 600+ request waterfall that would congest the browser. The other choices describe separate concerns: A and B address CommonJS conversion, while D confuses pre-bundling with tree-shaking.
Read the full bite: Explain Vite dependency pre-bundling, startup speed, and CommonJS handling
Question 14 of 30
Which behavior is a default Angular CLI production build optimization configured in angular.json?
Show the answer
Answer: c · It strips unused library code and minifies scripts and styles
The production target in angular.json sets optimization to true, which enables dead code elimination and minification. AOT compilation is used in both development and production in modern Angular, so it is not a production-only optimization.
Read the full bite: Describe two key Angular CLI production build optimizations
Question 15 of 30
What is a key architectural difference between adapter-static and adapter-node?
Show the answer
Answer: a · adapter-static pre-renders pages into HTML files at build time, whereas adapter-node produces a Node server for dynamic requests
adapter-static outputs static HTML for CDN deployment while adapter-node creates a running Node server capable of SSR and API routes. A is tempting but wrong because Vite handles bundling; an adapter only repackages the already-bundled output for a specific platform.
Read the full bite: What is a SvelteKit adapter and how do adapter-static and adapter-node differ?
Question 16 of 30
When implementing route-level lazy loading for an NgModule, which combination ensures the CLI emits a separate chunk without manual build configuration?
Show the answer
Answer: b · The feature uses loadChildren with a dynamic import and is removed from AppModule imports
The CLI automatically splits a chunk when it detects a dynamic import in loadChildren and the module is absent from AppModule's static dependency graph. Manual Webpack entry points are a red flag because Angular abstracts the build tool, and keeping an eager import in AppModule forces the feature into the main bundle.
Read the full bite: How would you implement lazy loading for an Angular feature module?
Question 17 of 30
In a single Vite Library Mode build producing ESM and UMD outputs, which setup correctly externalizes Vue and maps it to window.Vue in the UMD bundle?
Show the answer
Answer: b · build.rollupOptions.external includes vue and output.globals maps vue to Vue, with formats set to es and umd
rollupOptions.external keeps Vue out of the bundle while output.globals tells the UMD build to use window.Vue at runtime. The most tempting distractor omits globals because ESM does not need them, but without that mapping the UMD output will throw a runtime error trying to resolve vue as a module.
Read the full bite: How do you configure Vite Library Mode for ESM and UMD outputs?
Question 18 of 30
You have a product listing page that updates daily. Should you prerender it or SSR it? What's the main trade-off?
Show the answer
Answer: a · Prerender once per day on a cron schedule to balance freshness and speed
Daily-updated content fits a hybrid model: prerender on a cron (freshness every 24 hours) combined with instant static serve. Option C (prerender without schedule) risks stale data. Option B (pure SSR) is overkill and costly if the data doesn't change frequently. Option D adds complexity without solving the core need.
Read the full bite: Prerendering vs SSR in SvelteKit: trade-offs?
Question 19 of 30
Which of the following would violate encapsulation in a reusable Button component?
Show the answer
Answer: c · Providing a class or style prop for consumer style overrides
Exposing a class or style prop creates an escape hatch that breaks encapsulation by letting consumers override internal styles, making the component unmaintainable at scale. Variant, slots, and native event forwarding are all encouraged practices for a clean, composable API.
Read the full bite: Design the public API for a reusable Button component
Question 20 of 30
Which approach should a child component use when it needs to change data received from its parent via props?
Show the answer
Answer: d · Emit an event or invoke a callback to ask the parent to update the data.
The child should treat props as read-only and request changes through events or callbacks, preserving unidirectional data flow and predictable state ownership. Directly mutating the prop (option B) breaks the explicit contract and makes debugging difficult because the parent loses control over its own state.
Read the full bite: Primary mechanism for passing data from parent to child component
Question 21 of 30
When a child must notify its parent of a new search query, which approach preserves proper encapsulation in Vue and Angular?
Show the answer
Answer: c · The child declares an event via defineEmits in Vue or @Output EventEmitter in Angular and emits the query upward.
Emitting a named, typed event through defineEmits or @Output/EventEmitter keeps the parent in control of state and follows framework conventions. Option D is tempting because direct mutation seems efficient, but it violates unidirectional data flow and breaks component encapsulation.
Read the full bite: How do you emit events from a child to parent component?
Question 22 of 30
You're building a reusable Header component. Should the parent or child control what goes in the navigation bar?
Show the answer
Answer: b · Slots: parent passes rendered nav markup, Header places it in the nav bar
Slots (B) let the parent control the exact structure and appearance of navigation (plain links, dropdowns, icons, custom styling), while the Header retains layout concerns. Props (D) works but requires Header to anticipate all nav variations. Context (C) is overkill. Computed (A) couples Header to routing logic.
Read the full bite: Content projection: slots vs props for composition?
Question 23 of 30
Which best explains why two-way binding syntax in Vue and Angular is considered syntactic sugar rather than true bidirectional flow?
Show the answer
Answer: a · It expands into a one-way property binding plus an event binding so the parent can update its own state.
v-model sugars value and input while ngModel sugars a property binding and ngModelChange, preserving unidirectional data flow by requiring the parent to handle the event and mutate canonical state. The first option is wrong because the child never directly mutates the parent; it only emits a change notification.
Read the full bite: What bindings do v-model and ngModel sugar, and why?
Question 24 of 30
Your Vue component receives a user prop from a server API response. Which approach best validates that the response shape is correct?
Show the answer
Answer: b · Both TypeScript interface and a runtime validator
TypeScript validates at build time (your component code), but the API response is dynamic and may not conform. A runtime validator catches malformed responses at runtime (Option B). Option C alone won't catch API schema drift. Option D is risky. Option A alone is verbose without TS clarity.
Read the full bite: Compile-time vs runtime prop validation across frameworks?
Question 25 of 30
Which problem arises when a component exposes multiple boolean props such as isLoading and isError?
Show the answer
Answer: a · It allows conflicting flags that create impossible states and leaks internal priority logic.
Multiple booleans let callers pass conflicting flags like isLoading and isError, which creates impossible states and forces silent prioritization via conditional ordering. The argument that booleans are simpler or more flexible is a red flag because it makes invalid states representable rather than unrepresentable.
Read the full bite: Compare multiple boolean props versus a single status string prop
Question 26 of 30
In a reusable DataList component, what is the primary architectural benefit of using scoped slots instead of having the parent manage the iteration?
Show the answer
Answer: a · It allows the child to own data fetching, filtering, and iteration while the parent controls only the visual template for each row.
Scoped slots preserve encapsulation by keeping data fetching and iteration inside the child while letting the parent determine markup. Option C is a common misconception because slot content uses lexical scope and cannot see child data unless the child explicitly exposes it through slot props or template context.
Read the full bite: Implement a scoped slot pattern in a reusable DataList
Question 27 of 30
When architecting a headless Toggle component, which approach correctly inverts control so the parent owns the markup?
Show the answer
Answer: a · Rendering only a scoped slot that passes on and toggle to the parent, which decides what DOM to emit
A headless component must render no DOM of its own and expose state and actions through a scoped slot so the parent controls all markup. Option B is a red flag because config props like theme tightly couple logic to a specific visual implementation rather than truly inverting control.
Read the full bite: Architect a headless Toggle with scoped slots
Question 28 of 30
When a parent mutates a nested property of an object passed to a child component, how does Vue 3's behavior differ from Angular's OnPush strategy?
Show the answer
Answer: d · Vue 3 recursively tracks nested access with Proxies and updates dependents automatically, while Angular OnPush skips re-rendering because the input reference remains unchanged.
Vue 3 uses Proxy-based reactivity to intercept and trigger updates for nested mutations automatically, while Angular OnPush only checks input references and skips re-rendering when they are unchanged. Option C is wrong because Angular Default never performs deep observation; it relies on zone.js-triggered digest cycles, so it does not behave like Vue 3.
Read the full bite: How do Vue and Angular detect nested object mutations?
Question 29 of 30
A sidebar card is toggled ten times a minute. Why prefer v-show over v-if?
Show the answer
Answer: d · v-show keeps the node mounted and preserves internal state
v-show keeps the element in the DOM and only flips CSS display, preserving internal state and avoiding costly mount cycles during frequent toggles. Distractor B is wrong because toggling display CSS describes v-show, whereas v-if actually removes the element from the DOM.
Read the full bite: How do you conditionally render Login/Logout with isLoggedIn in Vue or Angular?
Question 30 of 30
When you write v-model or [(ngModel)] in a template, what is the framework actually doing under the hood?
Show the answer
Answer: c · It is shorthand for binding a value property downward and listening for an update event upward
Two-way binding is syntactic sugar for a property pushing data down and an event pushing changes back up. Option D is a common misconception: the view does not mutate state directly; frameworks use explicit events to update the model.
Read the full bite: Explain two-way data binding and provide input binding syntax
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.