Skip to content
Vue 3

Single-File Component

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

#component#sfc#script-setup

Code

vue3
<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>