Vue SFC: script template style
Understand the Single-File Component format: the script block for logic, the template block for the view, and the style block for scoped CSS.
Vue SFC: script template style is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is a Single-File Component?
A Vue Single-File Component (SFC) is a .vue file with three blocks: <script> for JavaScript logic, <template> for the HTML view, and <style> for CSS. Everything for one component lives in one file.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>The script Block
Logic, data, imports, and composition API code go here. With <script setup>, variables and imports declared at the top level are automatically available in the template.
script setup — The Modern Approach
<script setup> is the recommended SFC syntax. Variables, computed properties, and functions declared in it are directly available in the template without needing to return them explicitly.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>The template Block
The template contains the component's HTML view. Vue templates are compiled to render functions. Use Vue-specific attributes and directives (v-if, v-for, @click) inside the template.
Template Interpolation
Use double curly braces {{ }} to output reactive data as text. Vue automatically escapes HTML — to render HTML, use the v-html directive (with caution).
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>The style Block
CSS in the style block applies to the component. Add scoped to scope styles to this component's elements only — preventing accidental global style leaks.
<style scoped>
.card {
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>How Scoped Styles Work
Vue adds a unique data attribute (like data-v-abc123) to component elements and rewrites scoped CSS selectors to include it. This ensures styles only match elements in this component.
CSS Modules in Vue
An alternative to scoped: use <style module> for CSS Modules. Access class names via the $style object in the template.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Global Styles
Styles without scoped apply globally. One common pattern: a global app.css for base styles + design tokens, and scoped styles per component for component-specific rules.
TypeScript in SFCs
Add lang="ts" to the script block to use TypeScript. Volar (the official Vue IDE extension) provides full TypeScript support for Vue SFCs including type-checked templates.
SFC File Naming
Name SFC files in PascalCase (UserProfile.vue) for components used in templates. Vue recommends multi-word names to avoid conflicts with HTML elements.
Quick Check
What does the scoped attribute on a Vue <style> block do?
Recap: Vue SFCs
.vue files have three blocks: script (logic), template (view), style (CSS). Use