Vue.js Developer Certification — Questions and Answers

Question 1: How do nested routes work in Vue Router?

They require separate router instances
They are defined using route.addChild()
They are defined in the children array of a parent route and rendered in a nested <router-view> (Correct answer)
They are automatically detected based on folder structure

Correct answer: They are defined in the children array of a parent route and rendered in a nested <router-view>

Child routes are defined in the children property of a parent route, and the parent component must contain a <router-view> to render them.

Question 2: What does the deep: true option do in a Vue 3 watch() call?

Runs the watcher synchronously
Creates a computed watcher
Forces the watcher to track nested object property changes (Correct answer)
Enables async watchers

Correct answer: Forces the watcher to track nested object property changes

deep: true causes Vue to traverse every nested property of the source object so changes at any depth trigger the callback.

Question 3: How do you apply multiple CSS classes conditionally using `v-bind:class`?

:class="{ active: isActive, error: hasError }" (Correct answer)
v-class="isActive: active"
:class="isActive && 'active'"
class="{{ isActive ? 'active' : '' }}"

Correct answer: :class="{ active: isActive, error: hasError }"

Object syntax for `:class` adds a class when its value is truthy. `{ active: isActive, error: hasError }` applies `active` when `isActive` is true and `error` when `hasError` is true.

Question 4: Which lifecycle hook should you use to fetch initial data when a component loads?

onMounted (or created/setup for non-DOM dependent fetches) (Correct answer)
onUpdated
onBeforeMount
onActivated

Correct answer: onMounted (or created/setup for non-DOM dependent fetches)

Data fetching is typically done in `onMounted`. If the fetch doesn't need DOM access, you can also start it in `setup()` directly, which runs slightly earlier.

Question 5: All of the event listeners are automatically deleted after a view model is lost.

Sometimes
False
True (Correct answer)

Correct answer: True

In Vue.js, when a component (or view model) is destroyed or unmounted, Vue's reactivity system automatically cleans up its associated event listeners and watchers. This prevents memory leaks and ensures that the application remains efficient by removing references to elements that no longer exist in the DOM.

Question 6: Which Vue 3 API function creates a deeply reactive object from a plain JavaScript object?

ref()
computed()
reactive() (Correct answer)
shallowRef()

Correct answer: reactive()

reactive() wraps a plain object in a Proxy to make all nested properties deeply reactive.

Question 7: Which of the following is a valid way to register a child component locally in Vue 3 Options API?

register('MyButton')
Vue.component('MyButton', MyButton)
components: { MyButton } (Correct answer)
import MyButton and use directly in template

Correct answer: components: { MyButton }

Local component registration in Options API is done via the `components` option object. The component is only available inside that parent component.

Question 8: Which composable utility converts all properties of a reactive object into individual refs?

toRefs() (Correct answer)
unref()
toRef()
isReactive()

Correct answer: toRefs()

toRefs() destructures a reactive object into individual refs while maintaining the reactive connection for each property.

Question 9: What is the key difference between watch() and watchEffect() in Vue 3?

watch() is synchronous; watchEffect() is async
watch() cannot access old values; watchEffect() can
watch() runs immediately on mount; watchEffect() does not
watch() requires explicit source declaration; watchEffect() auto-tracks dependencies (Correct answer)

Correct answer: watch() requires explicit source declaration; watchEffect() auto-tracks dependencies

watch() observes specific declared sources and provides old/new values, while watchEffect() auto-collects dependencies at runtime.

Question 10: What does shallowRef() do to improve performance compared to ref()?

It prevents the ref from being used in templates
It makes the ref reactive only at the top level, skipping deep reactivity for nested objects (Correct answer)
It creates a ref that is only accessible from shallow components
It limits the ref to a single reactive update per tick

Correct answer: It makes the ref reactive only at the top level, skipping deep reactivity for nested objects

shallowRef() wraps a value in a ref but does not convert nested objects to reactive proxies, reducing overhead for large objects that are replaced entirely.

Question 11: What is a named slot used for?

Naming a component file
Defining computed values
Targeting specific outlets when a component has multiple slots (Correct answer)
Declaring props

Correct answer: Targeting specific outlets when a component has multiple slots

Named slots let a component expose multiple distinct content outlets identified by name.

Question 12: Which shorthand represents the v-on directive?

#
@ (Correct answer)
*
:

Correct answer: @

The @ symbol is shorthand for v-on, used to attach event listeners.

Question 13: Which casing does the style guide recommend for prop names in JavaScript versus templates?

camelCase in JS, kebab-case in templates (Correct answer)
snake_case in both
PascalCase in both
UPPERCASE in JS, camelCase in templates

Correct answer: camelCase in JS, kebab-case in templates

Props are declared in camelCase in script but referenced in kebab-case within HTML templates.

Question 14: What does `toRefs` do in Vue 3?

Removes reactivity from a reactive object
Converts refs into a reactive object
Converts computed values to refs
Converts a reactive object's properties into individual refs, preserving reactivity when destructured (Correct answer)

Correct answer: Converts a reactive object's properties into individual refs, preserving reactivity when destructured

`toRefs` converts each property of a reactive object into a separate ref, so destructuring the result maintains reactivity.

Question 15: The Vue template is rendered with the property value and accompanying data object using this tag.

Mustache (Correct answer)
Braces
Brackets
String Literals

Correct answer: Mustache

In Vue.js, the 'Mustache' syntax, denoted by double curly braces `{{ }}`, is used for declarative data rendering in templates. It allows you to embed JavaScript expressions that are then evaluated and displayed as plain text in the DOM, serving as the primary way to bind data properties from the Vue instance to the template.

Question 16: How do you trigger a button click event on a mounted component in @vue/test-utils?

wrapper.find('button').trigger('click') (Correct answer)
wrapper.emit('click')
wrapper.click()
wrapper.get('button').fire('click')

Correct answer: wrapper.find('button').trigger('click')

wrapper.find() locates a DOM element and trigger() dispatches a synthetic DOM event on it, returning a Promise you should await.

Question 17: What does Vue recommend for components that should only ever have a single active instance, like a sidebar?

Suffix it with 'Single'
Begin the name with 'The' to indicate a singleton (Correct answer)
Use lowercase
Mark it with a number

Correct answer: Begin the name with 'The' to indicate a singleton

Single-instance components are prefixed with 'The' (e.g., TheHeader) to signal there is only one.

Question 18: How do you use the Composition API in a Vue 3 component that still uses the Options API?

Use a separate <script setup> alongside the existing Options API
Add a setup() function to the Options API component — it runs before other options and can return values used by them (Correct answer)
Replace all options with Composition API functions
Composition API cannot be mixed with Options API

Correct answer: Add a setup() function to the Options API component — it runs before other options and can return values used by them

A `setup()` function can coexist with Options API options in Vue 3. It runs first and can return values accessible by the Options API and template.

Question 19: In Vue 3, how do you access a template ref (DOM element) inside a lifecycle hook?

Declare const myEl = ref(null), add ref="myEl" to the element, then access myEl.value inside onMounted
Both A and C are correct (Correct answer)
Use this.$refs.myEl in Options API or useTemplateRef() in Composition API
Use document.getElementById in setup()

Correct answer: Both A and C are correct

Template refs are accessed in Composition API via a `ref(null)` matched to a `ref="name"` attribute, available in `onMounted`. In Options API, `this.$refs` is the equivalent. Both are valid in Vue 3.

Question 20: What is the purpose of the v-memo directive introduced in Vue 3.2?

Memoizes a component's computed properties
Prevents a slot from re-rendering when parent updates
Caches API responses inside the template
Skips re-rendering a sub-tree when a specified array of dependencies has not changed (Correct answer)

Correct answer: Skips re-rendering a sub-tree when a specified array of dependencies has not changed

v-memo accepts a dependency array and only re-renders that element/component tree when one of the listed values changes, similar to React.memo.

Question 21: Which function unwraps a ref and returns its inner value, or returns the value as-is if it is not a ref?

toValue() (Correct answer)
unwrap()
deRef()
getValue()

Correct answer: toValue()

toValue() (formerly unref() alias in Vue 3.3+) returns the inner .value if passed a ref, otherwise returns the argument directly.

Question 22: Which directive renders an element only when a condition is true and removes it from the DOM otherwise?

v-model
v-show
v-html
v-if (Correct answer)

Correct answer: v-if

v-if conditionally adds or removes an element from the DOM based on the expression.

Question 23: How do you apply a directive only when a certain condition is met without using a wrapping `v-if`?

Directives cannot be conditionally applied without v-if
Use v-directive.conditional modifier
Pass a null/undefined binding value and check it in the directive's hook: if (!binding.value) return (Correct answer)
Use v-bind on the directive

Correct answer: Pass a null/undefined binding value and check it in the directive's hook: if (!binding.value) return

Directives always run but can check their binding value. Returning early when `!binding.value` effectively makes the directive a no-op when the condition is falsy.

Question 24: How do you access a Pinia store's state and actions inside a Vue 3 component?

inject('myStore').count
const store = new MyStore(); store.state.count
this.$store.state.count
const store = useMyStore(); store.count; store.increment() (Correct answer)

Correct answer: const store = useMyStore(); store.count; store.increment()

Pinia stores are used by calling the composable returned by `defineStore`. The result directly exposes state, getters, and actions as flat properties.

Question 25: In Pinia, how do you reset a store's state to its initial values?

store.$patch({})
store.reset()
store.setState(initialState)
store.$reset() (Correct answer)

Correct answer: store.$reset()

$reset() is a built-in Pinia method available on Options-API stores that reverts all state properties back to their initial values.

Question 26: What is the recommended official state management library for Vue 3?

Pinia (Correct answer)
MobX
Vuex
Redux

Correct answer: Pinia

Pinia is the official, recommended store library for Vue 3, succeeding Vuex.

Question 27: How do you prevent form submission and handle it in Vue 3?

<form onsubmit="return false">
<form v-on:submit="stop">
<form @submit="preventDefault">
<form @submit.prevent="handleSubmit"> (Correct answer)

Correct answer: <form @submit.prevent="handleSubmit">

`@submit.prevent` combines event listening with `preventDefault()` in Vue's declarative style, blocking the browser's default form submission and calling your handler.

Question 28: What does <Teleport> let you do?

Emit events
Scope CSS
Render a component's markup elsewhere in the DOM (Correct answer)
Cache computed values

Correct answer: Render a component's markup elsewhere in the DOM

<Teleport> moves rendered content to a target location outside the parent's DOM tree.

Question 29: This is used to add/create HTML components in the template property of the Vue instance.

Directives
String Interpolation
Double Quotes
Template String Literal (Correct answer)

Correct answer: Template String Literal

Template string literals, enclosed by backticks (`` ` ``), are a JavaScript feature often used in Vue.js to define multi-line HTML templates within the `template` option of a component or instance. They allow for easy embedding of expressions and multi-line strings, making it convenient to define the structure of HTML components directly in JavaScript.

Question 30: In Vue 3 Composition API, what replaces the `beforeCreate` and `created` Options API hooks?

onCreated()
The setup() function itself — code in setup() runs at the same time as these hooks (Correct answer)
onSetup()
There is no equivalent

Correct answer: The setup() function itself — code in setup() runs at the same time as these hooks

In Composition API, the `setup()` function runs synchronously when the component instance is created, replacing both `beforeCreate` and `created`. Code placed at the top of `setup()` effectively runs at creation time.

Vue.js Developer Certification

The official Vue.js Developer Certification tests competency in building reactive web applications with Vue 3, covering core concepts, components, the Composition API, reactivity, and the broader Vue ecosystem. Developed in collaboration with Evan You and the Vue.js core team via Certificates.dev.

Questions

30 min

Time Limit

83%

To Pass

Checking for saved progress...

Exam Rules

You can skip questions and return to them later
Flag questions for review before submitting
No feedback shown until you submit the entire exam
Unanswered questions count as wrong — answer everything
10 pretest questions are mixed in and don't affect your score
Timer auto-submits when time runs out
Your progress is auto-saved every 30 seconds