Top 30 Intermediate Vue, Angular & Svelte Interview Questions and Answers

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.

1. Question 1 of 30

   When a reactive variable changes in Svelte, how is the update triggered differently than in Vue 3's runtime Proxy system?

   • aBy compiler transforms that turn assignments into explicit update calls
   • bThrough ES6 Proxies that intercept property mutations at runtime
   • cVia Object.defineProperty on every reactive property during mount
   • dThrough two-way binding that automatically syncs the variable and DOM
   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

2. Question 2 of 30

   Why does Angular treat dependency injection as a runtime architectural layer rather than relying on ES module imports like Vue?

   • aIt automatically removes unused services from the bundle regardless of whether they are listed in module providers.
   • bIt avoids constructor boilerplate by letting components request dependencies without declaring them in constructors.
   • cIt enables runtime resolution of service lifetimes and implementation swapping without changing consumer code or direct file coupling.
   • dIt provides a hierarchical state container identical to Vue's provide and inject API.
   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?

3. Question 3 of 30

   When reactive state changes in a Svelte component, how does the compiled application update the browser DOM?

   • aIt creates a lightweight virtual DOM tree and diffs it against the previous render to determine patches.
   • bIt re-evaluates the template through a compiler-generated diffing algorithm to patch the real DOM.
   • cIt performs dirty checking across component bindings and reconciles mismatches against the live DOM.
   • dIt executes pre-generated imperative statements that directly mutate the affected DOM nodes.
   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?

4. Question 4 of 30

   To avoid CORS errors when calling a local backend from an Angular app in development, what should you do?

   • aCreate a proxy file, register it under serve proxyConfig in angular.json, and restart ng serve
   • bUpdate environment.ts to point directly to the backend origin
   • cLaunch the browser with disabled web security to allow cross-origin requests
   • dEnable CORS headers on the backend server for localhost:4200
   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?

5. Question 5 of 30

   Why does Vite pre-bundle an ESM package like lodash-es during development?

   • aTo convert its CommonJS modules into ESM so the browser can import them.
   • bTo collapse hundreds of internal ESM files into a single module and avoid an HTTP request waterfall.
   • cTo enable named imports from dynamically assigned CJS exports like React.
   • dTo tree-shake unused code and reduce the size of the served development bundle.
   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

6. Question 6 of 30

   Which behavior is a default Angular CLI production build optimization configured in angular.json?

   • aIt enables Ahead-of-Time compilation exclusively for production builds
   • bIt removes all console.log statements without extra configuration
   • cIt strips unused library code and minifies scripts and styles
   • dIt reads optimization settings from the environment.ts file
   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

7. Question 7 of 30

   What is a key architectural difference between adapter-static and adapter-node?

   • aadapter-static pre-renders pages into HTML files at build time, whereas adapter-node produces a Node server for dynamic requests
   • badapter-static supports dynamic API routes and server hooks by default, whereas adapter-node only serves static files
   • cadapter-static bundles application code with Vite, whereas adapter-node relies on Rollup for bundling
   • dadapter-node generates static HTML for CDN hosts, whereas adapter-static requires a Node server on a VPS
   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?

8. Question 8 of 30

   You're building a reusable Header component. Should the parent or child control what goes in the navigation bar?

   • aComputed property: Header derives nav structure from URL route
   • bSlots: parent passes rendered nav markup, Header places it in the nav bar
   • cContext API: parent provides nav config in context, Header reads it
   • dProps: parent passes navItems as an array, Header renders links
   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?

9. Question 9 of 30

   Which best explains why two-way binding syntax in Vue and Angular is considered syntactic sugar rather than true bidirectional flow?

   • aIt expands into a one-way property binding plus an event binding so the parent can update its own state.
   • bIt creates a dedicated two-way reactive tunnel that bypasses normal props and events.
   • cIt relies on framework-level watchers to detect changes and silently update the parent property.
   • dIt allows the child component to directly mutate the parent's bound property without an explicit event.
   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?

10. Question 10 of 30

    Your Vue component receives a user prop from a server API response. Which approach best validates that the response shape is correct?

    • aRuntime validator function in the props definition
    • bBoth TypeScript interface and a runtime validator
    • cTypeScript interface on the prop
    • dNo validation; trust the API
    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?

11. Question 11 of 30

    Which problem arises when a component exposes multiple boolean props such as isLoading and isError?

    • aIt allows conflicting flags that create impossible states and leaks internal priority logic.
    • bIt requires runtime prop-type checks or ESLint rules to catch invalid prop combinations.
    • cIt prevents consumers from combining orthogonal states, making the API less flexible than booleans.
    • dIt increases prop surface area, making the component harder to document and maintain over time.
    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

12. Question 12 of 30

    When a list is reordered using array index as key, why might a checkbox display the wrong checked state?

    • aThe shifted indices produce duplicate key warnings that prevent the framework from syncing component props correctly.
    • bThe framework reuses existing DOM nodes and binds them to new props while preserving internal element state.
    • cThe framework treats reordered items as new elements because their indices changed, recreating DOM nodes with fresh state.
    • dThe key prop is ignored during reconciliation because array indices are considered unstable identifiers.
    Show the answer

    Answer: b · The framework reuses existing DOM nodes and binds them to new props while preserving internal element state.

    The framework matches nodes by key, so index keys cause it to reuse the same DOM nodes for different data items and preserve internal state like checkbox values. Option C is tempting because changed indices feel like new identities, but index keys actually trigger unwanted reuse rather than recreation, which is why state leaks between items.

    Read the full bite: Explain key or trackBy in list rendering and index key risks

13. Question 13 of 30

    Expressions inside markup passed to a child slot are evaluated in which scope?

    • aAn isolated scope with access only to global variables
    • bThe parent's scope, because the slot content is compiled in the parent's template
    • cThe child's scope, because the child owns the slot outlet
    • dA shared scope merging parent and child properties
    Show the answer

    Answer: b · The parent's scope, because the slot content is compiled in the parent's template

    Slot content is compiled in the parent's template, so expressions inside it access parent data, not the child's. Option C is tempting because the child renders the outlet, but lexical scope is determined at compile time in the parent.

    Read the full bite: How do you pass markup from a parent to a child component?

14. Question 14 of 30

    In classic Svelte, why does reassigning an array with spread trigger an update while calling push on the same array does not?

    • aJavaScript arrays are immutable by default, so push creates a new reference that Svelte ignores.
    • bSvelte relies on a virtual DOM diff that cannot detect in-place mutations like push, unlike React.
    • cThe Svelte compiler instruments assignment operators but not method calls, so push is invisible to the reactive system.
    • dSvelte requires immutable updates, so mutating the existing array with push bypasses change detection.
    Show the answer

    Answer: c · The Svelte compiler instruments assignment operators but not method calls, so push is invisible to the reactive system.

    Classic Svelte's compiler transforms assignment expressions into reactive setters, but it does not wrap method calls like push, so the reactive graph never hears about the change. The virtual DOM distractor is wrong because Svelte updates DOM nodes surgically via compiled code rather than relying on a virtual DOM diff.

    Read the full bite: Why does todos.push miss Svelte updates but spread works?

15. Question 15 of 30

    In Angular, binding [disabled]="isDisabled" on a button sets the DOM property. Why must ARIA roles use [attr.role] instead of [role]?

    • aProperty bindings are reserved for component @Input() decorators and native form controls
    • bAngular's change detection monitors attributes more efficiently than properties for string values
    • cHTML attributes automatically sanitize their values, whereas DOM properties do not
    • dThe role HTML attribute has no corresponding DOM property on standard elements, so Angular must write to the markup directly
    Show the answer

    Answer: d · The role HTML attribute has no corresponding DOM property on standard elements, so Angular must write to the markup directly

    Angular writes to DOM properties by default, so attribute binding is required when no corresponding DOM property exists, such as with ARIA role or SVG attributes. Option B is tempting because it suggests a framework optimization, but the distinction is about the binding target, not change detection efficiency.

    Read the full bite: What's the difference between Angular property and attribute binding?

16. Question 16 of 30

    A parent passes an array to an OnPush child. After pushing a new item into the existing array, the child does not update. Why?

    • aOnPush completely disables change detection after the first render
    • bThe array reference remained the same, so OnPush found no input change
    • czone.js does not monitor array mutations, so Angular skipped the child
    • dThe parent must call markForCheck before mutating the array
    Show the answer

    Answer: b · The array reference remained the same, so OnPush found no input change

    OnPush only checks a component when an input reference changes, an event fires in its subtree, or markForCheck is called; pushing into the same array mutates it without changing the reference. Option A is wrong because OnPush does not disable detection entirely—it merely makes it conditional on specific triggers.

    Read the full bite: Explain Angular default change detection, zone.js, and OnPush

17. Question 17 of 30

    You need to display a list filtered by user input and fetch remote data when a route parameter changes. Which approach follows Vue's reactivity design?

    • aUse watch to filter the list into a reactive ref and computed to trigger the fetch when the parameter changes.
    • bUse computed to derive the filtered list for the template and watch to execute the fetch when the parameter changes.
    • cUse computed for both filtering the list and fetching remote data, since computed automatically caches async results.
    • dUse watch for both filtering the list and fetching data, because watchers are more flexible than computed.
    Show the answer

    Answer: b · Use computed to derive the filtered list for the template and watch to execute the fetch when the parameter changes.

    Computed is for synchronous derived state and caches its result, while watch is for imperative side effects like API calls. Option C is tempting but wrong because computed must be synchronous and pure, so async work inside it breaks reactivity expectations.

    Read the full bite: Fundamental difference between Vue computed and watcher with examples

18. Question 18 of 30

    Which of the following must be true for a plain JavaScript object to act as a valid Svelte store?

    • aIt must implement a subscribe method that accepts a callback and returns an unsubscribe function.
    • bIt must be referenced with the $ prefix wherever it is used in code.
    • cIt must expose set and update methods so components can modify it.
    • dIt must be created using writable() or derived() from svelte/store.
    Show the answer

    Answer: a · It must implement a subscribe method that accepts a callback and returns an unsubscribe function.

    Svelte recognizes any object as a store as long as it provides a subscribe method that takes a callback and returns an unsubscribe function. Option D is tempting but wrong because the $ prefix is consumer-side auto-subscription syntax in .svelte files, not part of the store's definition contract.

    Read the full bite: How do Svelte Stores work and how do you create custom ones?

19. Question 19 of 30

    When is switching an Angular component from Emulated to ShadowDom encapsulation the right architectural choice?

    • aWhen you want to eliminate the DOM overhead and event retargeting issues caused by native shadow roots
    • bWhen the component requires native style isolation through unique _nghost and _ngcontent attributes added by Angular
    • cWhen the component requires strict style isolation in a micro-frontend that must resist host application CSS resets
    • dWhen the component needs to inject global utility classes that override third-party styles without selector rewriting
    Show the answer

    Answer: c · When the component requires strict style isolation in a micro-frontend that must resist host application CSS resets

    ShadowDom uses true browser shadow roots to protect embeddable widgets from host style pollution, whereas option B is wrong because _nghost and _ngcontent attributes are part of Emulated mode's simulated scoping, not native Shadow DOM.

    Read the full bite: Compare Angular's three ViewEncapsulation modes and give a use case.

20. Question 20 of 30

    How does Vue 3 compile a rule like .parent :deep(.child) inside a scoped style block?

    • aIt converts the rule to .parent[data-v-xxx] .child, scoping only the ancestor
    • bIt applies the scoped data attribute to .child elements inside the child component
    • cIt disables PostCSS scoping for the entire component
    • dIt extracts the selector into a global unscoped style rule
    Show the answer

    Answer: a · It converts the rule to .parent[data-v-xxx] .child, scoping only the ancestor

    Vue adds the scoped attribute selector only to the ancestor, producing .parent[data-v-xxx] .child so the descendant can match inside child components without leaking the attribute. Option B is tempting but wrong because Vue does not stamp the child component's internals with the parent's scope attribute.

    Read the full bite: What deep selector pierces Vue scoped styles, and why use it cautiously?

21. Question 21 of 30

    How do CSS Modules and Vue scoped CSS fundamentally differ in their approach to style encapsulation?

    • aCSS Modules are a Vue compiler feature that scopes styles by attribute, while scoped CSS requires manual class binding via an imported object.
    • bCSS Modules inject unique data-attributes into the DOM, while scoped CSS hashes class names during compilation.
    • cCSS Modules hash class names and expose a mapping object, while scoped CSS adds unique data-attributes to elements and selectors.
    • dBoth systems hash class names, but only CSS Modules require explicit binding to an imported object in the template.
    Show the answer

    Answer: c · CSS Modules hash class names and expose a mapping object, while scoped CSS adds unique data-attributes to elements and selectors.

    CSS Modules use a build tool to hash class names and export a JavaScript mapping object, while Vue scoped CSS relies on the Vue compiler to add unique data-attributes and rewrite selectors. Distractor A reverses these two mechanisms, which is a common misconception.

    Read the full bite: How do CSS Modules differ from Vue scoped CSS?

22. Question 22 of 30

    How does Angular's Emulated view encapsulation prevent styles from one component from affecting elements in another component?

    • aIt stamps template elements with _ngcontent-* attributes and rewrites CSS selectors to require those attributes.
    • bIt renders each component inside a native ShadowRoot so the browser scopes styles automatically.
    • cIt injects inline style attributes onto every element in the component's template during compilation.
    • dIt stamps all child elements with _nghost-* and limits CSS to the host element's attribute boundary.
    Show the answer

    Answer: a · It stamps template elements with _ngcontent-* attributes and rewrites CSS selectors to require those attributes.

    Angular marks every template element with an _ngcontent-* attribute and rewrites the component's CSS selectors to include that attribute suffix, so the rules only match elements inside this component's view. Distractor D reverses the mechanics: _nghost is placed on the host element, not on every child, and the general scoping of styles relies on _ngcontent, not the host attribute.

    Read the full bite: How do _ngcontent and _nghost attributes enforce Angular style isolation?

23. Question 23 of 30

    When displaying a password mismatch error in Vue based on two reactive inputs, which approach best follows the framework's intended reactivity patterns?

    • aUse a watcher on both fields that updates a separate isMatch reactive flag whenever either password value changes.
    • bDefine a computed boolean that evaluates whether the two password fields match and bind the error display directly to it.
    • cUse a watcher to trigger an async API call that verifies the passwords match and returns the validation result.
    • dUse a watcher on the confirmPassword field to directly toggle the error element's CSS display property in the DOM.
    Show the answer

    Answer: b · Define a computed boolean that evaluates whether the two password fields match and bind the error display directly to it.

    A computed property declaratively derives state from existing reactive data and caches the result, re-evaluating only when dependencies change. Option A is tempting but wrong because manually syncing an isMatch flag in a watcher abandons Vue's automatic caching and creates a synchronization hazard where the flag can drift from the inputs.

    Read the full bite: Validate matching Vue passwords: computed property or watcher?

24. Question 24 of 30

    In an RxJS live validation pipeline, what is the specific responsibility of switchMap when handling debounced user input?

    • aTo cancel any in-flight validation request when a newer input value arrives
    • bTo wait until the user pauses typing before triggering the API call
    • cTo prevent duplicate API calls when the input value repeats
    • dTo catch network errors and return a fallback value
    Show the answer

    Answer: a · To cancel any in-flight validation request when a newer input value arrives

    switchMap unsubscribes from the previous inner observable when a new value emits, canceling in-flight validation requests and preventing race conditions. Option B describes debounceTime, which only delays emissions but does not cancel active HTTP calls.

    Read the full bite: How do you debounce input for API validation in Vue or Angular?

25. Question 25 of 30

    When building a reusable Svelte validation action, which approach satisfies the lifecycle contract and keeps the logic portable?

    • aAccept the DOM node, attach listeners, toggle classes or ARIA directly, and return update and destroy methods.
    • bMutate component $state from inside the listener and return a cleanup function that resets the store.
    • cSubscribe to a writable store and apply classes through a reactive derived statement.
    • dReturn an HTML snippet that replaces the input content when validation fails.
    Show the answer

    Answer: a · Accept the DOM node, attach listeners, toggle classes or ARIA directly, and return update and destroy methods.

    A Svelte action receives the mounted node and must return an object with update and destroy to handle parameter changes and automatic cleanup. Distractor A is tempting because stores are idiomatic in Svelte, but actions should perform imperative DOM manipulation directly rather than coupling to the component's reactive state graph.

    Read the full bite: How would you build a reusable Svelte validation action?

26. Question 26 of 30

    Your Vue app has 8 components sharing a user profile and notification state. Mutations scatter across services and components. Should you migrate to Pinia?

    • aYes, because the shared state is complex enough to warrant centralized mutations
    • bOnly if you add Redux-style time-travel debugging
    • cNo, services are sufficient for any app
    • dMaybe; refactor the services first to isolate concerns, then decide
    Show the answer

    Answer: d · Maybe; refactor the services first to isolate concerns, then decide

    Option D is wisest: before adopting Pinia, clarify your service boundaries (separate UserService from NotificationService, define clear mutation points). If the refactored services are still hard to follow, adopt Pinia. Option C underestimates sprawl. Option A jumps to tooling without considering simpler refactoring. Option B misses Pinia's main value (clarity, not just debugging).

    Read the full bite: When to adopt Pinia or NgRx over simple services?

27. Question 27 of 30

    In an optimistic like-button implementation, what should happen when the POST request fails after the UI has already toggled the liked state?

    • aBlock the button with a loading spinner until the network recovers and the request succeeds
    • bRevert the liked state and count to their pre-click snapshot and show a transient failure message
    • cLeave the new liked state visible and attempt silent background retries without notifying the user
    • dTreat the server error as non-critical and keep the optimistic update since the user intent was already registered
    Show the answer

    Answer: b · Revert the liked state and count to their pre-click snapshot and show a transient failure message

    Reverting the optimistic mutation and surfacing a transient toast restores consistency and maintains user trust when the network fails. Keeping the optimistic update without rollback is tempting because it honors user intent, but it leaves the UI permanently out of sync with the server after a rejected request.

    Read the full bite: Implement optimistic UI for a like button with rollback on failure

28. Question 28 of 30

    When configuring a server-state library to share cache between a list and detail view, which strategy best avoids refetching on back-navigation while keeping data updated?

    • aStore the list response in a global client state library like Redux and manually sync the detail view from that store.
    • bImplement a custom in-memory cache with manual TTL and deduplication logic shared between the two routes.
    • cUse nested query keys so the detail pulls from the list cache, set staleTime to a few minutes, and keep background refetch enabled.
    • dSet staleTime to zero so both views always fetch the latest data from the server on every navigation.
    Show the answer

    Answer: c · Use nested query keys so the detail pulls from the list cache, set staleTime to a few minutes, and keep background refetch enabled.

    Nested query keys let the detail view reuse list cache as placeholder data, and a non-zero staleTime prevents refetching on back-navigation while background refetching preserves freshness. Using a general client store like Redux is a red flag because it lacks built-in deduplication, TTL, and normalization for server state.

    Read the full bite: How would you cache data between a list and detail view?

29. Question 29 of 30

    When navigating from /products/1 to /products/2 in Vue Router, how should a component fetch updated data for the new id?

    • aInside the updated lifecycle hook, since the component re-renders on route changes
    • bBy watching route.params.id or using the beforeRouteUpdate in-component guard
    • cBy parsing window.location.href to extract the new id when the route updates
    • dInside onMounted, because the component remounts whenever the id parameter changes
    Show the answer

    Answer: b · By watching route.params.id or using the beforeRouteUpdate in-component guard

    Vue Router reuses the same component instance when only dynamic params change, so onMounted does not fire again. The idiomatic approach is to watch route.params.id or use beforeRouteUpdate to fetch data, rather than relying on a remount or parsing window.location.

    Read the full bite: How do you create a dynamic route and access the id parameter?

30. Question 30 of 30

    Which pattern correctly implements an authentication check in a Vue Router global guard without causing an infinite redirect loop?

    • aCall next with a login path inside beforeEach when unauthenticated, and call next without arguments when authenticated
    • bReturn the Login route object from beforeEach when isAuthenticated is false, while allowing the Login route itself to proceed unchecked
    • cAlways redirect to Login from beforeEach whenever isAuthenticated is false, including when the target is already Login
    • dEmit an unauthorized event from the guard and let the Login component listen for it to trigger navigation
    Show the answer

    Answer: b · Return the Login route object from beforeEach when isAuthenticated is false, while allowing the Login route itself to proceed unchecked

    Returning a route object from beforeEach redirects unauthenticated users, while allowing the Login route itself to proceed prevents an infinite loop. Option A is tempting because next() was historically common, but the card notes it is error-prone and unnecessary in modern Vue Router compared to return values.

    Read the full bite: Explain navigation guards and provide an auth use case