Skip to content
\n\n\n\n","url":"https://ez4code.com/snippets/vue3-component","keywords":"component, sfc, script-setup","author":{"@type":"Person","name":"EZ4Code Team"},"publisher":{"@type":"Organization","name":"EZ4Code","logo":{"@type":"ImageObject","url":"https://ez4code.com/logo.png"}},"datePublished":"2024-01-01","dateModified":"2026-08-01","image":"https://ez4code.com/og-image.png"}
Vue 3

Single-File Component

Define a Vue 3 component with script setup, template, and scoped styles.

By EZ4Code Team
componentsfcscript-setup

Code

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

const props = defineProps({
  msg: { type: String, default: "Hello" }
});
const count = ref(0);
</script>

<template>
  <h1>{{ props.msg }}</h1>
  <button @click="count++">Count: {{ count }}</button>
</template>

<style scoped>
h1 { color: #42b883; }
</style>

Explanation

A Vue 3 Single-File Component combines script, template, and style in one file. The script setup compiler macro unlocks concise composition API usage with automatic top-level binding exposure to the template. Scoped styles add a data attribute to prevent CSS leakage.

More Vue 3 Snippets

Composition API

Organize reactive state, computed, and lifecycle logic by feature.

Refs & Reactive

Choose between ref and reactive for reactive state.

Computed & Watch

Derive values with computed and react to changes with watch.

Props & Emits

Declare inputs and events, and implement v-model on a component.

Lifecycle Hooks

Register lifecycle callbacks as composable functions.

Slots & Scoped Slots

Distribute content with default, named, and scoped slots.