VUE
115 bites tagged VUE — interview questions with model answers, and 60-second explainers.
How do you manage router scroll behavior and history position restoration?
Use scrollBehavior to return savedPosition on popstate and top: 0 on new navigations; handle hash anchors and async delays. Your grasp of popstate and centralized router scroll orchestration.
Contrast SvelteKit file-system routing with Vue/Angular router configs
Contrast SvelteKit directory routes with Vue/Angular config routers; filesystem routing removes boilerplate but couples URLs to folders and limits dynamic registration. Convention-over-configuration tradeoffs.
What are nested routes and why are they useful?
Nested routes render children inside a parent's router-view, preserving shared layouts while URL segments swap nested content. hierarchical UI-to-URL mapping. flat routes with duplicated parent wrappers in every child.
Explain navigation guards and provide an auth use case
Guards are global, per-route, or in-component hooks; returning false cancels, a route object redirects; use auth on /dashboard. Grasp of routing lifecycle interception. Calling them listeners without mentioning returns.
How do you create a dynamic route and access the id parameter?
This tests Vue Router dynamic segment syntax and param access. Define the path with a colon like /products/:id, then read via useRoute().params.id or $route.params.id. A red flag is expecting a remount on param changes or parsing window.location manually.
Create a template link to a route without a full page reload
Tests SPA client-side routing knowledge. Strong answer: name RouterLink or routerLink, explain click interception and History API URL updates, and contrast with plain anchor tags.
How do you define a basic Vue or Angular route?
Tests SPA routing conventions. Angular: Routes array in app.routes.ts with path and component, provided in bootstrap. Vue: routes array in src/router/index.js passed to createRouter. Red flag: omitting the outlet or placing config in a component.
Differentiate client state from server state and their tools
This tests whether you recognize server state as async, remote, and cacheable versus local synchronous client state. A strong answer contrasts ownership and lifecycles, mapping Pinia to UI state and Vue Query to fetched data.
Fetch data on first render and manage loading and error states
Tests lifecycle awareness and separation of concerns. Strong answer: use mount hook (onMounted, ngOnInit, onMount), hold reactive data/loading/error states, and render conditional UI branches. Red flag: calling fetch directly in template or render function.
Share state between sibling components without a state library
Tests if you over-engineer simple sibling state. Good answers lift state to the common parent, passing data down via props and changes up via events; or use built-in primitives like Svelte stores or an Angular shared service.
What is prop drilling and when is it a problem?
Define it as passing data through components that ignore it; move to global state when unrelated branches need same data. props through indifferent layers couple components. prescribing Pinia for every shared field.
How do you structure components and state for a dynamic Vue form?
This tests your design of normalized reactive state for dynamic Vue forms. A great answer uses a flat item array with stable keys, row components or scoped slots, and schema-driven validation. Red flags include mutating by index or using array indices as keys.
How do you debounce input for API validation in Vue or Angular?
Tests reactive stream control and cancellation. A strong answer uses debounceTime at 300ms, switches with switchMap, and handles loading and error states. Red flag: using setTimeout without cleanup or ignoring race conditions.
Validate matching Vue passwords: computed property or watcher?
Use a computed boolean for caching and dependency tracking; reserve watchers for side effects only. Whether you derive state or watch imperatively. Using a watcher to sync a match flag, wasting cycles and causing bugs.
How does Vue v-model work syntactically under the hood?
Tests if you know v-model is syntax sugar over prop and event pairs. Strong answers map text to :value/@input, checkboxes to :checked/@change, selects to value/@change, and note JS state wins. Red flag: calling it magic or true two-way binding.
How does Vue's v-bind() CSS function work in style blocks?
Tests Vue SFC CSS transforms and browser primitives. Strong answer: Vue compiles v-bind() to scoped CSS custom properties, letting reactive values work with pseudo-selectors and media queries.
How do CSS Modules differ from Vue scoped CSS?
This question tests build-time versus compiler style isolation. CSS Modules export a hashed class mapping object; Vue scoped CSS adds unique data-attributes. You bind templates via $style.myClass or an imported object. Red flag: claiming both use attributes.
What deep selector pierces Vue scoped styles, and why use it cautiously?
This tests Vue scoped CSS encapsulation. Use :deep() to target child internals from a scoped block, but it breaks encapsulation and creates brittle coupling. A red flag is recommending deprecated /deep/ or unscoped global styles.
What attribute scopes styles to a Vue component?
This tests knowledge of Vue's style encapsulation. Add the scoped attribute to the style tag; Vue adds a unique data attribute to elements and selectors. A red flag is suggesting manual BEM or claiming scoped styles never affect child components.
Implement auto-cleanup reactive logic in Vue's Composition API and Svelte
Vue pairs onMounted with onUnmounted or watchEffect cleanup; Svelte uses $store auto-subscription or onDestroy. Binding streams to lifecycles without leaks.
Fundamental difference between Vue computed and watcher with examples
Tests derived state vs side effects in Vue reactivity. Computed returns cached derived value; watch executes callback on mutation. Example: computed filters list; watch fetches data when ID changes. Red flag: watch for template state or computed for async.
Vue 3 ref() vs reactive(): differences and when to use each
Tests Vue 3 Composition API reactivity primitives. Strong answer: ref() wraps any value in a .value wrapper and is the recommended default; reactive() returns a proxy accessed directly. Red flag: saying ref() is only for primitives or omitting .value entirely.
In Vue 3, what problem does Teleport solve?
This tests DOM hierarchy and CSS stacking context. A strong answer covers how Teleport moves markup to a target like body to escape ancestor transforms and z-index ceilings trapping fixed modals. Red flag: claiming it is only for cleaner HTML.
Why does todos.push miss Svelte updates but spread works?
Tests compile-time versus runtime reactivity. Answer: Svelte's compiler instruments assignments, not method calls, so push is invisible; Vue Proxies and Angular Zone.js both intercept push to trigger updates.
Get VUE bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.