Question 1

What is a Vue component?

Accepted Answer

A reusable unit with template, script, and optional style that encapsulates UI and behavior. SFCs (.vue) are standard. Composition API with <script setup> is preferred in Vue 3. Components communicate via props/emits and provide/inject.

Question 2

Options API vs Composition API?

Accepted Answer

Options groups by option type; Composition groups by feature using functions. Composition scales better for complex logic reuse via composables. Options remains valid and readable for simple components.

Question 3

What does <script setup> give you?

Accepted Answer

Syntactic sugar for Composition API: top-level bindings auto-expose to template, better DX/ perf compile. Use defineProps/defineEmits. No explicit return. Preferred default for new Vue 3 code.

Question 4

Single-file component structure best practices?

Accepted Answer

Keep components focused; extract composables; colocated scoped styles; clear props/emits. Avoid giant SFCs. Split presentational vs container when needed.

Question 5

How do async components work in Vue?

Accepted Answer

defineAsyncComponent loads a component on demand with optional loading/error components. Code-split heavy widgets. Combine with Suspense for awaiting setup.

Question 6

What is Vue Suspense used for?

Accepted Answer

Coordinate async setup/dependencies with fallback content while resolving. Useful with async components and top-level await in setup. Nest carefully.

Question 7

Functional vs stateful components in Vue 3?

Accepted Answer

Functional components are stateless/perf niche; most UI uses stateful SFCs. Prefer normal components unless you have a measured need. Vue 3 optimized differently than Vue 2.

Question 8

How do slots enable composition?

Accepted Answer

Parents pass template content into child slot outlets; named/scoped slots pass data outward. Prefer slots over brittle prop render flags for flexible APIs.

Question 9

When do you use keep-alive?

Accepted Answer

Cache dynamic component instances so state/scroll survive toggles. Include/exclude names carefully. Watch memory growth with many cached trees.

Question 10

Teleports — what problem do they solve?

Accepted Answer

Render UI (modals/toasts) elsewhere in the DOM while keeping logical component ownership. Helps stacking contexts and accessibility focus management patterns.

Question 11

Recursive components — when and pitfalls?

Accepted Answer

Components that render themselves for trees; ensure a base case and unique keys. Mind performance on deep trees. Prefer iterative virtualization when huge.

Question 12

Design a reusable DataTable component API in Vue.

Accepted Answer

Props for columns/rows; scoped slots for cell rendering; emits for sort/select; avoid over-config props. Composition over endless boolean props. Document slot contracts.

Components Vue.js Interview Questions

Other Vue.js interview topics