What is Vue.js and what are its core features? | Interview Question

Q: What is Vue.js and what are its core features?

**Target Audience:** Complete beginners preparing for a first Vue interview. Assumes you know a little HTML and JavaScript, nothing about Vue or any other framework. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The outputs in sections 5 and 6 were produced by actually compiling and running the code on Vue 3.5.44, the current stable release. ## 1. Why This Even Matters — A Story First Imagine you run a small café and keep the menu on a whiteboard. Every time a dish sells out, someone has to walk over, find the right line, rub it out and rewrite the price list. On a quiet day that is fine. On a busy day the board is always a little bit wrong, because people forget which lines depend on which. Now imagine a magic whiteboard. You keep a simple list in a notebook ("soup: 3 left, cake: sold out") and the board redraws itself t

The problem

Question presented to candidate: "You have never worked with our frontend stack before. In plain words, what is Vue.js, and which features make it useful for building a user interface?"

What a strong answer should cover:

Vue is a progressive JavaScript framework for building user interfaces: you can add it to one widget through a script tag or build a whole single-page app with it.
Declarative rendering: an HTML-based template describes what the screen should look like for the current state; Vue keeps the DOM in sync.
Reactivity: state created with ref() / reactive() is tracked, so changing it updates exactly the parts of the page that read it; computed() gives cached derived values.
Components and Single File Components (.vue files with template, script and style) as the unit of reuse.
Built-in directives (v-if, v-for, v-bind, v-on, v-model) and an official ecosystem: Vite tooling, Vue Router, Pinia, Vue Test Utils, Nuxt.
Under the hood, templates are compiled to render functions with a virtual DOM; current stable is Vue 3 (3.5.x), and Vue 2 is end of life.

Clarifying questions expected:

"Are we adding Vue to an existing server-rendered page, or starting a new single-page app?"
"Do you want the feature list, or how it compares with React or Angular?"

Code / implementation expected: Optional. A small component with reactive state, a computed value and a list is a good way to show the core features.

vue
basics

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Complete beginners preparing for a first Vue interview. Assumes you know a little HTML and JavaScript, nothing about Vue or any other framework. Difficulty: Easy

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The outputs in sections 5 and 6 were produced by actually compiling and running the code on Vue 3.5.44, the current stable release.

1. Why This Even Matters — A Story First

Imagine you run a small café and keep the menu on a whiteboard. Every time a dish sells out, someone has to walk over, find the right line, rub it out and rewrite the price list. On a quiet day that is fine. On a busy day the board is always a little bit wrong, because people forget which lines depend on which.

Now imagine a magic whiteboard. You keep a si

The solution is hidden so you can try first

11 min read · 10 sections

Read the code

VueCore features in one component: reactive state, computed, v-model, v-for, v-if and events

Open in playground

<script setup>
import { ref, computed, version } from "vue";

// Reactive state: when these change, Vue re-renders only what reads them.
const newTodo = ref("");
const todos = ref([
  { id: 1, text: "Learn templates", done: true },
  { id: 2, text: "Learn reactivity", done: false },
]);

// Derived state: cached, recomputed only when todos changes.
const remaining = computed(() => todos.value.filter((t) => !t.done).length);

let nextId = 3;
function addTodo() {
  if (!newTodo.value.trim()) return;
  todos.value.push({ id: nextId++, text: newTodo.value.trim(), done: false });
  newTodo.value = "";
}
</script>

<template>
  <h3>Vue {{ version }} todo list</h3>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" placeholder="What next?" />
    <button>Add</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <label>
        <input type="checkbox" v-model="todo.done" />
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
      </label>
    </li>
  </ul>
  <p v-if="remaining === 0">All done!</p>
  <p v-else>{{ remaining }} left</p>
</template>

<style scoped>
.done { text-decoration: line-through; color: gray; }
</style>

Progressive adoption: Vue from a script tag, no build step

<!doctype html>
<html>
  <body>
    <div id="app">
      <button @click="count++">Clicked {{ count }} times</button>
    </div>
    <script src="https://unpkg.com/vue@3.5.44/dist/vue.global.prod.js"></script>
    <script>
      Vue.createApp({ data: () => ({ count: 0 }) }).mount("#app");
    </script>
  </body>
</html>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.