A Vue component is a reusable unit with its own template and logic. In this playground, components are plain objects with setup() and a template string—similar to how React lessons use function components before introducing files.
Naming and structure
- Component names use PascalCase in JavaScript:
UserCard. - In templates, use PascalCase or kebab-case:
<UserCard />or<user-card />. - Keep components focused—one clear responsibility per file in real Vite projects.
- Register locally by assigning to a property on the parent (playground pattern) or globally in apps.
setup() return value
Whatever setup() returns is exposed to the template—refs, functions, computed values. Think of it as the component’s public surface, like values used in a React function component’s JSX.
Important interview questions and answers
- Q: Options API vs Composition API?
A: Options API groups by concern (data,methods); Composition API colocates logic insetup(). Vue 3 recommends Composition for new code; both compile to the same reactivity system. - Q: Where does side-effect code go?
A: In lifecycle hooks likeonMountedor watchers—not as bare top-level async insetup()without consideration.
Self-check
- Why must component names start with a capital letter?
- What does
setup()return?
Challenge
Card component
- Extract a
Cardcomponent withtitleandbodyprops. - Render two
Cardinstances fromApp.
Done when: two cards appear with different titles in the preview.