← All topics

Vue Senior interview questions and answers

75 questions for a Vue (Senior) interview - with correct answers, explanations and links to the docs.

Take this quiz
  1. 1.How does Vue 3 track reactive dependencies?
  2. 2.Why is reactive(obj) === obj false, and why does it matter?
  3. 3.When should you use markRaw on a value stored in reactive state?
  4. 4.Why does changing state 100 times in one handler cause only one re-render?
  5. 5.What is effectScope for?
  6. 6.Since Vue 3.4, what happens when a computed recalculates to the same value?
  7. 7.What goes wrong when a lifecycle hook is registered after await in a plain setup() function?
  8. 8.How do you share one instance of a composable's state across all components that use it?
  9. 9.What makes Vue's virtual DOM "compiler-informed"?
  10. 10.Why are templates generally preferred over hand-written render functions in Vue?
  11. 11.What goes wrong when v-for uses the index as key and items are inserted at the top?
  12. 12.How can changing the key of a component be used intentionally?
  13. 13.What does v-memo do?
  14. 14.Why can passing activeId to every list item make large lists slow?
  15. 15.How do you render a list of 10,000 rows efficiently?
  16. 16.Why might wrapping large API data in reactive/ref be costly, and what is the alternative?
  17. 17.How do you reduce the initial bundle of a large Vue SPA?
  18. 18.What does the runtime-only build of Vue lack, and why is it the default with Vite?
  19. 19.Why does <KeepAlive> without max risk memory growth?
  20. 20.What is cross-request state pollution in Vue SSR?
  21. 21.What commonly causes hydration mismatches in Vue SSR?
  22. 22.What does lazy hydration in Vue 3.5 enable?
  23. 23.Why use useId() (3.5+) for id/aria-* attributes?
  24. 24.Which lifecycle hooks run during SSR?
  25. 25.Why do many teams use Nuxt instead of hand-rolled Vue SSR?
  26. 26.How is Pinia state transferred from the server to the client?
  27. 27.Why is mounting Vue on server-rendered HTML that contains user content dangerous?
  28. 28.Is binding a user-provided URL to :href safe in Vue?
  29. 29.Why is binding user-controlled values to :style risky?
  30. 30.When is a module-level composable singleton enough instead of Pinia?
  31. 31.What is a good way to organize a large Vue codebase?
  32. 32.Which Vue 2 patterns must be replaced when migrating to Vue 3?
  33. 33.How do you migrate a large Options API codebase to the Composition API?
  34. 34.How do you expose a Vue component as a native Custom Element?
  35. 35.What does a global app.config.errorHandler give you that onErrorCaptured doesn't?
  36. 36.How do you write a generic component (e.g. a typed select)?
  37. 37.What does defineSlots add?
  38. 38.How do you type a template ref to a child component?
  39. 39.How do you implement role-based access with route meta?
  40. 40.How do you restore scroll position when the user navigates back?
  41. 41.When would you call router.addRoute()?
  42. 42.How do guards handle async work like fetching permissions?
  43. 43.What can a Pinia plugin do?
  44. 44.What is the difference between $subscribe and a watch on store state?
  45. 45.Why must setup stores return every piece of state?
  46. 46.How do you test a composable that uses lifecycle hooks or inject?
  47. 47.How do you test a component that uses Vue Router?
  48. 48.What is the main trade-off between component tests and end-to-end tests?
  49. 49.When would you write a render function with h()?
  50. 50.What does createRenderer from @vue/runtime-core allow?
  51. 51.What does the previous argument of a computed getter (Vue 3.4+) allow?
  52. 52.What does deep: 2 on a watcher do (Vue 3.5+)?
  53. 53.How do you type a global property like $t added with app.config.globalProperties?
  54. 54.How do you stream SSR HTML to the client instead of waiting for the whole page?
  55. 55.What does data-allow-mismatch (Vue 3.5+) do?
  56. 56.What is onServerPrefetch for?
  57. 57.Why does Nuxt warn against calling $fetch directly in <script setup> for page data?
  58. 58.Why use Nuxt's useState instead of a module-level ref for shared state?
  59. 59.When is router.beforeResolve the right place for a check?
  60. 60.What is the modern way to redirect or cancel inside a Vue Router 4 guard?
  61. 61.How do you combine route transitions and <KeepAlive> with <RouterView>?
  62. 62.What is skipHydrate in Pinia for?
  63. 63.Why add acceptHMRUpdate to Pinia store files?
  64. 64.What does <Teleport defer> (Vue 3.5+) solve?
  65. 65.What does returning false from onErrorCaptured do?
  66. 66.How do you mock API calls in component tests without mocking fetch per test?
  67. 67.How do you build a Vue component library with Vite without bundling Vue itself?
  68. 68.How do you type a complex prop in the Options API?
  69. 69.Why is a global app.provide() often better than globalProperties for app-wide services?
  70. 70.How are <Teleport> contents handled in SSR?
  71. 71.Why can a reactive array of 50,000 objects make filtering slow, and what helps?
  72. 72.How do you keep the initial value of a prop as local editable state without warnings?
  73. 73.How do micro-frontends share one Vue runtime with Module Federation?
  74. 74.When does a component with an async setup() need special care in tests?
  75. 75.What is a safe migration strategy from Vuex to Pinia in a large app?