Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Vue Js · Complete Question Bank
Practice the complete collection of Vue Js interview questions including theory, coding, MCQs and real interview problems.
Questions
124
Full database
Topics
21
Categorised
Difficulty
Mixed Levels
Easy Hard
Scroll through every important Vue Js question asked in real interviews. Includes MCQs, subjective questions, and coding prompts.
<template>
<div>
<h1>Hello, {{ message }}</h1>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() { return { message: 'Vue!' } }
}
</script>
<style scoped>
h1 { color: blue; }
</style>Browse more Vue Js questions, explore related subjects, or practice full interview sets to strengthen your preparation.
// Vue 2
new Vue({ el: '#app', data: { message: 'Hello!' } })
// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')// Child.vue
<script>
export default { props: { title: { type: String, required: true } } }
</script>
<!-- Parent.vue -->
<Child :title="'Welcome'" /><p :title="message">{{ message }}</p>
<input v-model="userInput">import { nextTick } from 'vue'
count.value++
await nextTick()
// DOM reflecting count is now updated// Global (Vue 3)
import { createApp } from 'vue'
import Button from './Button.vue'
const app = createApp(App)
app.component('BaseButton', Button).mount('#app')
// Local
export default { components: { BaseButton } }// Child.vue
<script>
export default {
props: {
title: { type: String, required: true },
count: { type: Number, default: 0 }
}
}
</script>
<!-- Parent.vue -->
<Child :title="'Hello'" :count="3" />props: {
options: {
type: Array,
default: () => []
},
mode: {
type: String,
validator: v => ['light','dark'].includes(v)
}
}// Child.vue (Vue 3)
<script>
export default {
emits: ['submit'],
methods: { onClick(){ this.$emit('submit', { ok: true }) } }
}
</script>
<!-- Parent.vue -->
<Child @submit="handleSubmit" />// Child.vue
<script>
export default {
props: { modelValue: String },
emits: ['update:modelValue']
}
</script>
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<!-- Parent.vue -->
<MyInput v-model="name" /><!-- Child.vue --> <template> <header><slot name="header" /></header> <main><slot /></main> <footer><slot name="footer" /></footer> </template> <!-- Parent.vue --> <Card> <template #header>Title</template> Body content <template #footer>Actions</template> </Card>
<!-- Child.vue -->
<template>
<ul>
<li v-for="item in items" :key="item.id">
<slot name="item" :item="item">{{ item.label }}</slot>
</li>
</ul>
</template>
<!-- Parent.vue -->
<List :items="rows">
<template #item="{ item }">
<strong>{{ item.label }}</strong>
</template>
</List>// Ancestor
provide('theme', ref('dark'))
// Descendant
const theme = inject('theme', ref('light'))<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li><CompA v-if="visible" /> <CompB v-show="visible" />
// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
// Vue 2
new Vue({ el: '#app', render: h => h(App) })export default {
name: 'ExampleComponent',
data(){
return { message: 'Hello', count: 0 }
}
}export default {
data: () => ({ first: 'Ada', last: 'Lovelace', q: '' }),
computed: { full(){ return `${this.first} ${this.last}` } },
methods: { clear(){ this.q = '' } },
watch: { q(newQ){ this.search(newQ) } }
}watch: {
settings: {
deep: true,
immediate: true,
handler(val){ console.log('settings changed', val) }
}
}import { nextTick } from 'vue'
this.expanded = true
await nextTick()
const h = this.$el.getBoundingClientRect().height<div :class="{ active: isActive, 'text-danger': hasError }" :style="{ color: color, fontSize: size + 'px' }"></div>// Vue 3 example
<template>{{ capitalize(name) }}</template>
<script setup>
function capitalize(s:string){ return s.charAt(0).toUpperCase() + s.slice(1) }
</script>// Vue 3 global
const app = createApp(App)
app.config.errorHandler = (err, instance, info) => { /* log/report */ }
// Per-component
export default { errorCaptured(err, vm, info){ /* cleanup */ return false } }<input v-model="name" placeholder="Your name" />
<input v-model.lazy="title" /> <input v-model.number="age" type="number" /> <input v-model.trim="email" />
<input type="checkbox" v-model="isAdmin">\n<input type="checkbox" v-model="skills" value="js">\n<input type="checkbox" v-model="skills" value="vue">\n<input type="radio" v-model="level" value="junior">
<!-- Child.vue -->
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])
function onInput(e){ emit('update:modelValue', e.target.value) }
</script>
<template><input :value="modelValue" @input="onInput"></template><PostEditor v-model:title="title" v-model:content="content" />
<form @submit.prevent="onSubmit"> <!-- fields --> <button :disabled="loading">Save</button> </form>
let ctrl: AbortController | null = null
async function checkEmail(email:string){
ctrl?.abort(); ctrl = new AbortController()
const res = await fetch(`/api/exists?email=${email}`, { signal: ctrl.signal })
state.emailError = (await res.json()).exists ? 'Email already used' : ''
}<script setup>
import { ref } from 'vue'
const props = defineProps({ modelValue: String, delay: { type: Number, default: 300 } })
const emit = defineEmits(['update:modelValue'])
let t: any
function onInput(e:any){ clearTimeout(t); t = setTimeout(() => emit('update:modelValue', e.target.value), props.delay) }
</script>
<template><input :value="modelValue" @input="onInput" /></template><input type="file" multiple @change="onFiles">
// JS
function onFiles(e:any){ const files = [...e.target.files] /* validate & upload */ }import { ref } from 'vue'
const count = ref(0)
count.value++import { reactive } from 'vue'
const state = reactive({ user: { name: 'Aya' }, loggedIn: false })
state.loggedIn = trueimport { reactive, toRefs, ref } from 'vue'
const inner = ref(1)
const state = reactive({ a: inner }) // inner unwrapped here
const { a } = toRefs(state) // keep reactivity when destructuringimport { ref, computed } from 'vue'
const first = ref('Ada'), last = ref('Lovelace')
const full = computed(() => `${first.value} ${last.value}`)const first = ref('Ada'), last = ref('Lovelace')
const full = computed({
get: () => `${first.value} ${last.value}`,
set: v => { const [f,l] = v.split(' '); first.value = f; last.value = l || '' }
})watch(state, (nv, ov) => save(nv), { deep: true, immediate: true })import { watchEffect } from 'vue'
watchEffect(() => {
// any reactive reads here become dependencies
console.log('User:', state.user.name)
})const stop = watchEffect((onInvalidate) => {
const ctrl = new AbortController()
fetch('/api', { signal: ctrl.signal })
onInvalidate(() => ctrl.abort())
})
// later
stop()watch([() => route.params.id, filters], ([id, fNew], [prevId, fOld]) => {
fetchList(id, fNew)
})<input v-model="text"> <!-- roughly equals --> <input :value="text" @input="text = $event.target.value">
<input v-model.trim="name"> <input v-model.number="age"> <input v-model.lazy="query">
<!-- single --> <input type="checkbox" v-model="isOn"> <!-- group --> <input type="checkbox" value="a" v-model="picked"> <input type="checkbox" value="b" v-model="picked"> <!-- radio --> <input type="radio" value="light" v-model="theme">
<select v-model="country">
<option :value="{ code: 'IN', name: 'India' }">India</option>
</select>
<select v-model="tags" multiple>
<option value="vue">Vue</option>
<option value="spa">SPA</option>
</select>// Child
export default {
props: { modelValue: String },
emits: ['update:modelValue']
}
// Template
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /><FancyInput v-model:title="title" v-model:checked="agreed" />
const form = reactive({ email: '', pwd: '' })
const errors = computed(() => ({
email: /.+@.+\..+/.test(form.email) ? '' : 'Enter a valid email',
pwd: form.pwd.length >= 8 ? '' : 'Min 8 chars'
}))
const canSubmit = computed(() => !errors.value.email && !errors.value.pwd)watch(() => form.username, (v, _, onInvalidate) => {
const ctrl = new AbortController()
const t = setTimeout(() => check(v, ctrl.signal), 300)
onInvalidate(() => { ctrl.abort(); clearTimeout(t) })
})const submitting = ref(false)
async function onSubmit(e){
e.preventDefault()
if(!canSubmit.value) return
submitting.value = true
try { await api.save(form) }
catch(err){ mapErrors(err) }
finally { submitting.value = false }
}import { ref, computed } from 'vue'
export default {
setup(){
const count = ref(0)
const double = computed(() => count.value * 2)
function inc(){ count.value++ }
return { count, double, inc }
}
}<script setup>
import { ref } from 'vue'
const msg = ref('Hello')
function flip(){ msg.value = msg.value.split('').reverse().join('') }
</script>const n = ref(0) // n.value
const state = reactive({ user: { name: 'Evan' } })
// Whole-object replace pattern
const obj = ref({ a: 1 }); obj.value = { a: 2 }const state = reactive({ first: 'Ada', last: 'Lovelace' })
const { first, last } = toRefs(state)
// first.value stays in sync with state.firstwatch(() => props.id, (n, o) => fetchUser(n)) watchEffect(() => console.log(form.email))
import { onMounted, onUnmounted } from 'vue'
onMounted(() => start())
onUnmounted(() => stop())export function useCounter(initial = 0){
const n = ref(initial)
const inc = (d=1)=> n.value += d
const dec = (d=1)=> n.value -= d
return { n, inc, dec }
}provide('theme', themeRef)
// descendant
const theme = inject('theme', ref('light'))const props = defineProps<{ modelValue: string }>()
const emit = defineEmits(['update:modelValue'])
const model = computed({
get: () => props.modelValue,
set: v => emit('update:modelValue', v)
})const t = setInterval(tick, 1000) onUnmounted(() => clearInterval(t))
const filtered = computed(() => items.value.filter(i => i.done))
import { defineAsyncComponent } from 'vue'
const Chart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
loadingComponent: () => import('./Loading.vue'),
delay: 200,
timeout: 10000
})<keep-alive include="UserList,UserDetail"> <router-view /> </keep-alive>
const chart = shallowRef() chart.value = markRaw(new EChartsInstance())
watch(query, debounce((q)=> fetch(q), 300))
<h1 v-once>Static Title</h1>
<div v-memo="[user.id]">{{ user.name }}</div>// Vitest + VTU example
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import Counter from './Counter.vue'
describe('Counter', () => {
it('increments', async () => {
const w = mount(Counter)
await w.get('button').trigger('click')
expect(w.text()).toContain('1')
})
})vi.mock('../api', () => ({ fetchUsers: vi.fn(() => Promise.resolve([{id:1}])) }))Correct Answer: A front-end JavaScript framework
Correct Answer: v-on
<button v-on:click="save()">Save</button>
Correct Answer: v-bind
<img :src="avatarUrl">
Correct Answer: created
Correct Answer: destroyed
Correct Answer: Server-side rendering
Correct Answer: v-tooltip
Correct Answer: {{}}
<p>{{ message }}</p>Correct Answer: A state management pattern and library for Vue.js
Correct Answer: Compute derived data and cache until dependencies change
Correct Answer: All code for a component in one file (template, script, style)
Correct Answer: A command-line tool to scaffold and build Vue apps
Correct Answer: Runs a function when a reactive property changes
Correct Answer: Render a block conditionally
Correct Answer: Loops over arrays or objects to render lists
<li v-for="u in users" :key="u.id">{{ u.name }}</li>Correct Answer: Handle client-side routing in an SPA
Correct Answer: Computed values are cached until dependencies change
Correct Answer: Declaratively manipulate or bind to the DOM