What are Vue components?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for Vue.js development. It reveals whether you understand the building blocks that more complex concepts rely on.
Answer
A Vue component is a reusable, self-contained piece of the UI with its own template, logic, and styles. Components are the building blocks of Vue applications. Single File Components (SFC — .vue files): the recommended format that combines template, script, and style in one file: <template> <div class="card"><h2>{{ title }}</h2></div> </template> <script setup> defineProps(["title"]); </script> <style scoped> .card { padding: 1rem; } </style>. Registering components: globally: app.component("MyCard", MyCard) — available everywhere without import; locally (recommended): import and declare in the component's script. In script setup, imported components are automatically available. Naming conventions: PascalCase for SFC files and component names; in templates both <MyCard /> and <my-card /> work. Component lifecycle: each component instance has its own lifecycle (created, mounted, updated, unmounted). Props and events: components communicate through props (parent → child data) and emits (child → parent events). Benefits: reusability, encapsulation, testability, maintainability. SFCs require a build step (Vite/Webpack with vue-loader); in-browser use without build: define component as an options object.
Common Mistake
A common mistake is memorizing definitions without understanding implications. When asked this question, go one level deeper — explain what happens when this concept is misused or ignored.