Component Basics

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand the structure of a Vue SFC
Import and use a child component

Let's break it down simply

A Vue component can have <script setup>, <template>, and an optional <style scoped>. Split components into small pieces, each with one feature or responsibility. Once a component is imported in <script setup>, you can use it directly in the template.

vue

<!-- CounterButton.vue -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<style scoped>
button { padding: .75rem 1rem; }
</style>

You should see

Clicked 0 times

Try it yourself

Create an AvatarCard.vue component and reuse it three times inside App.vue.

Components Basics — Vue.js

Easy traps

Cramming every feature into a single component
Using a component's tag in an SFC without importing it

Exercise

Create an AvatarCard.vue component and reuse it three times inside App.vue.

You'll know it worked when: Clicked 0 times