← All topics

Vue Junior interview questions and answers

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

Take this quiz
  1. 1.What is Vue?
  2. 2.What is the recommended way to scaffold a new Vue project?
  3. 3.What does a Single-File Component (.vue file) contain?
  4. 4.How is a Vue application created and attached to the page?
  5. 5.What is the difference between the Options API and the Composition API?
  6. 6.What does {{ message }} do in a Vue template?
  7. 7.How do you bind an attribute to a JavaScript value?
  8. 8.How do you listen to a click?
  9. 9.What does @submit.prevent="onSubmit" do?
  10. 10.How do you toggle a CSS class based on a condition?
  11. 11.Which expressions are allowed inside template bindings?
  12. 12.What does the shorthand # mean in <template #header>?
  13. 13.How do you declare reactive state in <script setup>?
  14. 14.What does reactive() return?
  15. 15.Why does destructuring a reactive object break reactivity?
  16. 16.What is computed() for?
  17. 17.Why might the DOM not be updated immediately after changing state?
  18. 18.Do you need .value when using a ref in the template?
  19. 19.Can you assign a new array to a ref holding a list?
  20. 20.What is the difference between v-if and v-show?
  21. 21.Which directives form a chain of conditions?
  22. 22.How do you render a list?
  23. 23.How do you get the index in v-for?
  24. 24.Why shouldn't v-if and v-for be used on the same element?
  25. 25.What does v-model on an input do?
  26. 26.What does v-model.number do?
  27. 27.How does v-model work with several checkboxes bound to one array?
  28. 28.How does a child component declare the props it accepts in <script setup>?
  29. 29.Why shouldn't a child mutate a prop?
  30. 30.How does a child notify its parent?
  31. 31.How do you pass markup from a parent into a child component?
  32. 32.How do you use a child component in <script setup>?
  33. 33.What happens to attributes like class passed to a component that doesn't declare them as props?
  34. 34.What does <style scoped> do?
  35. 35.How does a parent use v-model on a custom component (Vue 3.4+)?
  36. 36.How do you give a prop a default value and make another one required?
  37. 37.How do you switch between several components dynamically?
  38. 38.How can a deeply nested component receive a value without passing props through every level?
  39. 39.Why is v-html dangerous?
  40. 40.Where should you access the DOM after the component is rendered?
  41. 41.What is onUnmounted used for?
  42. 42.When should you use watch instead of computed?
  43. 43.How do you get a reference to a DOM element in <script setup> (Vue 3.5+)?
  44. 44.Where does Vue Router render the component for the current URL?
  45. 45.How do you create a navigation link without reloading the page?
  46. 46.How do you read the :id param of the route /users/:id in <script setup>?
  47. 47.How do you navigate from code, e.g. after saving a form?
  48. 48.What is Pinia?
  49. 49.How is a Pinia store defined and used?
  50. 50.What do you need to do before using any Pinia store?
  51. 51.What do the .stop and .once event modifiers do?
  52. 52.How do you run a handler only when Enter is pressed in an input?
  53. 53.What does v-model.trim do?
  54. 54.What does v-model.lazy change?
  55. 55.How do you bind several inline styles from an object?
  56. 56.What does v-bind="attrs" without an argument do?
  57. 57.What does v-once do?
  58. 58.What does <li v-for="n in 3">{{ n }}</li> render?
  59. 59.How do you iterate over an object's properties?
  60. 60.How do you apply v-if to several elements without adding a wrapper <div>?
  61. 61.Why does v-for need a unique :key?
  62. 62.How do you pass both an argument and the native event to a handler?
  63. 63.How should a prop declared as userName be written in a parent template?
  64. 64.What value does a Boolean prop get with <MyButton disabled />?
  65. 65.How does the parent receive the value sent with emit('select', id)?
  66. 66.How do you show default content when the parent passes nothing to a slot?
  67. 67.How do you navigate to a route by its name?
  68. 68.Which classes does <RouterLink> add to an active link by default?
  69. 69.How do you make / open /home?
  70. 70.How do you define a catch-all 404 route in Vue Router 4?
  71. 71.What is a getter in a Pinia store?
  72. 72.What is Vue DevTools used for?
  73. 73.Which environment variables are exposed to client code in a Vite project?
  74. 74.Which is the recommended default for reactive state in the Composition API?
  75. 75.Why can a ref declared with const still change?