Vue.js 3 Introduction & SFCs

Reactivity with ref() and reactive() »Next »

Explore Vue 3's progressive framework architecture and Single-File Components (.vue) containing template, script, and scoped styles.

The Structure of a .vue Single-File Component

Vue combines template markup, reactive JavaScript logic, and scoped styling within a single clean .vue file.

Modern Vue 3 Component with <script setup>

Try It Yourself »

<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => count.value++;
</script>

<template>
  <div class="counter">
    <h2>Clicks: {{ count }}</h2>
    <button @click="increment">Click Me</button>
  </div>
</template>

<style scoped>
.counter { text-align: center; padding: 20px; }
button { background: #42b883; color: white; border: none; padding: 8px 16px; border-radius: 6px; }
</style>

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which tag in a Vue Single-File Component encapsulates component logic using modern Vue 3 syntax?

Next: Reactivity with ref() and reactive() »