1. What is Vue 3?
Vue 3 is a JavaScript framework for building user interfaces. It uses a progressive design, so you can add it to a small page or a full application.
Full lesson: Vue3 introduction
Vue 3 interview questions
47 questions about Vue 3 with short answers and code. Each answer links to a full lesson on this site. Free, with no signup and no ads.
Basics
2. How do you start a simple Vue 3 application?
Call the createApp function with a root component. Then call the mount method with a container element.
const app = Vue.createApp({ data() { return { message: 'Hello Vue!!' } } })
app.mount('#app')Full lesson: Vue3 intro
3. How do you add Vue 3 to a page with a script tag?
Import the vue.global.js file with a script tag. Then write your template inside a container element.
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Full lesson: Vue3 install
4. What is the Vite tool?
Vite is a frontend build tool. It gives a fast development server and uses Rollup to build the final files.
npm create vite@latestFull lesson: Vite tutorial
5. What is template syntax in Vue 3?
Vue 3 uses an HTML-based template syntax. You bind data to the DOM with directives and interpolation.
<p>{{ message }}</p>
<a :href="url">Link</a>
<button @click="handleClick">Click me</button>Full lesson: Vue3 template syntax
6. How do you show an element only when a condition is true?
Use the v-if directive on the element. Vue renders the element only when the expression is true.
<p v-if="isLoggedIn">Welcome back, user</p>Full lesson: Vue3 v if intro
7. What is the difference between v-if and v-show?
v-if removes the element from the DOM when the condition is false. v-show keeps the element in the DOM and only hides it.
<p v-if="show">A</p>
<p v-show="show">B</p>Full lesson: Vue3 v if
8. How do you render a list of items?
Use the v-for directive on the element. Give each item a unique key value.
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>Full lesson: Vue3 v for
9. How do you bind a class to an element?
Use v-bind:class or the short form :class. The value can be an object that turns a class on or off.
<div :class="{ 'active': isActive }"></div>Full lesson: Vue3 class bind
10. How do you handle a click event in Vue 3?
Use the v-on directive or the short form @. Set the value to a method name or an inline expression.
<button @click="count++">{{ count }}</button>Full lesson: Vue3 v on
11. What is a Single-File Component?
A Single-File Component keeps HTML, JavaScript, and CSS in one .vue file. This groups the code of one component in one place.
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Full lesson: Vue3 sfc
12. How do you read a form input in Vue 3?
Use v-model on the input element. Vue keeps the data property and the input value in sync.
<input v-model="name">
<p>{{ name }}</p>Full lesson: Vue3 forms
13. What does the key attribute do in a list?
The key attribute gives each node a unique identifier. Vue uses the key to update the virtual DOM with less work.
<li v-for="item in items" :key="item.id">{{ item.name }}</li>Full lesson: Vue3 key
14. How do you get a DOM element with the ref attribute?
Add the ref attribute to the element. After mount, read the element from the component refs.
<input ref="myInput">
// this.$refs.myInput.focus()Full lesson: Vue3 ref
15. What is a common mistake with v-if and v-for on the same element?
Do not put v-if and v-for on the same element. v-if runs first and cannot see the loop variable. Put v-if on a parent element instead.
<template v-if="show">
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</template>Full lesson: Vue3 v if
Intermediate
16. What is a common mistake with the key attribute?
Do not use the array index as the key when the list can change order. Use a stable and unique value such as an id.
<li v-for="item in items" :key="item.id">{{ item.name }}</li>Full lesson: Vue3 key
17. What is a common mistake with reactive data?
Do not change a ref value without the .value property in script code. Use count.value to read or write the value.
const count = ref(0)
count.value = count.value + 1Full lesson: Vue3 watch
18. How do you bind an event listener with the v-on directive?
Use the v-on directive to bind an event listener. The shorthand is the @ symbol. For example, v-on:click or @click.
<button v-on:click="handleClick">Click</button>
<button @click="handleClick">Click</button>Full lesson: Vue3 v on
19. How do you use the v-model directive on a form input?
Use v-model on input, textarea, and select elements. It creates two-way data binding. v-model ignores the initial value attribute and uses the data property instead.
<input v-model="message">
<p>{{ message }}</p>Full lesson: Vue3 forms
20. How do you watch a data property for changes?
Use the watch option to monitor changes in a reactive property. When the property changes, Vue runs the watch function. This lets you run custom logic in response.
watch: {
counter(newVal, oldVal) {
console.log(`counter changed from ${oldVal} to ${newVal}`);
}
}Full lesson: Vue3 watch
21. What is the purpose of the v-pre directive?
The v-pre directive tells Vue to skip compilation for an element and its children. The element renders as raw HTML. Use it to display raw mustache tags.
<p v-pre>{{ raw }}</p>Full lesson: Vue3 v pre
22. How do you create a single-file component in Vue 3?
Create a file with the .vue extension. It contains template, script, and style blocks. This encapsulates the component in one file.
<template>
<div>Hello</div>
</template>
<script>
export default { name: 'Hello' }
</script>Full lesson: Vue3 sfc
23. How do you package a Vue project for production?
Run the npm run build command. This creates a dist directory with the production files. The dist directory contains index.html and static assets.
npm run buildFull lesson: Vue3 build
24. What is Pinia and how do you use it for state management?
Pinia is a state management library for Vue 3. It provides a global store for shared state. Install Pinia and create a store to use it.
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)Full lesson: Vue3 pinia
25. How do you use mixins to reuse component options?
Define a mixin object with reusable options. Add it to a component's mixins array. The component merges the mixin's options with its own.
const myMixin = {
created() { this.hello() },
methods: { hello() { console.log('Hello') } }
}
const app = Vue.createApp({ mixins: [myMixin] })Full lesson: Vue3 mixins
26. What does the inheritAttrs option do?
The inheritAttrs option controls whether non-prop attributes are applied to the root element. By default, it is true and attributes are inherited. Set it to false to prevent this.
export default {
inheritAttrs: false
}Full lesson: Vue3 api inheritattrs
27. What is a common mistake when using v-model on a textarea?
Do not use mustache syntax inside a textarea. Use v-model instead. v-model ignores the initial value and uses the data property.
<!-- Wrong -->
<textarea>{{ text }}</textarea>
<!-- Correct -->
<textarea v-model="text"></textarea>Full lesson: Vue3 forms
28. What is a common mistake with the v-for directive and the key attribute?
You must provide a unique key for each item in a v-for loop. Without a key, Vue can reuse elements incorrectly. Always use a unique identifier.
<li v-for="item in items" :key="item.id">{{ item.name }}</li>Full lesson: Vue3 v for
29. What is a common mistake when using v-if and v-for together?
Do not use v-if and v-for on the same element. v-if has higher priority and can cause errors. Use a computed property or a wrapper element instead.
<!-- Wrong -->
<li v-for="item in items" v-if="item.active">{{ item.name }}</li>
<!-- Correct -->
<li v-for="item in activeItems" :key="item.id">{{ item.name }}</li>Full lesson: Vue3 v if intro
30. What is a common mistake with the ref attribute?
The ref attribute is not reactive. Do not use it for data binding. Use it only to access DOM elements or component instances.
<!-- Wrong -->
<input ref="inputValue">
<!-- Correct -->
<input v-model="inputValue">Full lesson: Vue3 ref
31. What is a common mistake when using watch?
Do not watch a property that does not exist. The watch function will not run. Ensure the property is reactive and defined in data or setup.
// Wrong: 'nonExistent' is not defined
watch: {
nonExistent() { console.log('never called') }
}Full lesson: Vue3 watch
Common mistakes
32. What is a common mistake with the v-on directive?
Do not forget to define the method in the component. If the method is missing, the event handler will fail. Always define methods in the methods option or setup function.
<!-- Wrong: handleClick is not defined -->
<button @click="handleClick">Click</button>Full lesson: Vue3 v on
33. What is the v-pre directive used for?
The v-pre directive tells Vue to skip compilation for an element and its children. Vue renders the content as raw HTML without template syntax processing.
<p v-pre>{{ message }}</p>Full lesson: Vue3 v pre
34. How do you listen to a DOM event with the v-on directive?
Use v-on:click or the shorthand @click to listen to a click event. The handler can be a method name or an inline statement.
<button @click="counter += 1">Add 1</button>Full lesson: Vue3 events
35. How do you call a method when an event occurs?
Define the method in the component options. Then use @click with the method name.
<button @click="greet">Click</button>Full lesson: Vue3 events
36. How do you use the watch option to respond to data changes?
Add a watch object to the component options. Each key is a data property name and each value is a handler function.
watch: { counter(newVal, oldVal) { console.log(newVal) } }Full lesson: Vue3 watch
37. What is a mixin in Vue 3?
A mixin is an object that contains reusable component options. When a component uses a mixin, Vue merges the mixin options into the component options.
const myMixin = { methods: { hello() { console.log('Hello') } } }Full lesson: Vue3 mixins
38. How do you add a mixin to a component?
Use the mixins option and pass an array of mixin objects. Vue merges the mixin options with the component options.
const app = Vue.createApp({ mixins: [myMixin] })Full lesson: Vue3 mixins
39. What happens when a component and a mixin define the same method?
The component method takes priority. Vue merges the options and the component's own method overrides the mixin method.
Full lesson: Vue3 mixins
40. How do you skip compilation for an element and its children?
Add the v-pre directive to the element. Vue then renders the element and its children as raw HTML.
<div v-pre><p>{{ raw }}</p></div>Full lesson: Vue3 v pre
41. How do you display raw Mustache tags on a page?
Use the v-pre directive on the element that contains the tags. Vue does not compile the content, so the tags show as text.
<p v-pre>{{ message }}</p>Full lesson: Vue3 v pre
42. What is a common mistake when using v-pre?
A common mistake is to expect Vue to update the content inside a v-pre element. Vue skips compilation, so the content stays static.
Full lesson: Vue3 v pre
43. What is a common mistake with the v-on directive and method calls?
A common mistake is to write @click="greet()" when you only need the method reference. Both work, but @click="greet" is simpler and avoids extra calls.
<button @click="greet">Click</button>Full lesson: Vue3 events
44. What is a common mistake when using watch with an object?
A common mistake is to watch an object and expect deep changes to trigger the handler. You must set deep: true to watch nested properties.
watch: { user: { handler() {}, deep: true } }Full lesson: Vue3 watch
45. What is a common mistake with mixins and option merging?
A common mistake is to assume that mixin methods override component methods. The component's own options take priority.
Full lesson: Vue3 mixins
46. What is a common mistake when using v-pre on a parent element?
A common mistake is to put v-pre on a parent and expect child components to work. Vue skips compilation for all children, so child components do not render.
Full lesson: Vue3 v pre
47. What is a common mistake with the v-on shorthand?
A common mistake is to write @click without a handler. The shorthand needs a method name or an inline statement after the equals sign.
<button @click="doSomething">Go</button>Full lesson: Vue3 events