Vue First SFC Web Page

🌟 Vue First SFC Web Page (Single File Component) Web Page

In Vue.js, a Vue First SFC Web Page is the standard and recommended way to build Vue applications.

An SFC keeps HTML, JavaScript, and CSS together in one .vue file.

What is a Vue SFC?

A Single File Component is a .vue file that contains:

✔ Clean
✔ Organized
✔ Scalable
✔ Industry standard

🧱 Step 1: Create a Vue Project (Using Vite)

Run this in terminal:

Then:

Open browser at:
👉 http://localhost:5173

🧩 Step 2: Understand Default Structure

🧠 Step 3: `main.js` (Entry Point)

✔ Loads App.vue
✔ Mounts app to index.html

🧩 Step 4: Your First SFC – `App.vue`

This is your first Vue SFC web page 👇

<template>
<div class="container">
<h1>{{ title }}</h1>
<p>{{ message }}</p>

<button @click="changeMessage">
Click Me
</button>
</div>
</template>

<script>
export default {
data() {
return {
title: "My First Vue SFC Page",
message: "Welcome to Vue Single File Component"
}
},
methods: {
changeMessage() {
this.message = "You clicked the button 🚀"
}
}
}
</script>

<style>
.container {
text-align: center;
margin-top: 60px;
font-family: Arial;
}

button {
padding: 10px 20px;
cursor: pointer;
}
</style>

<h1>{{ title }}</h1>

<p>{{ message }}</p>

Click Me

</button>

</div>

</template>

export default {

data() {

return {

title: "My First Vue SFC Page",

message: "Welcome to Vue Single File Component"

}

methods: {

changeMessage() {

this.message = "You clicked the button 🚀"

}

</script>

<style>

.container {

text-align: center;

margin-top: 60px;

font-family: Arial;

}

button {

padding: 10px 20px;

cursor: pointer;

}

</style>

What’s Happening Here?

🧩 `<template>`

✔ Displays dynamic data
✔ Uses Vue template syntax

🧠 `<script>`

✔ Holds logic & state
✔ methods handle events

🎨 `<style>`

✔ Styles your component

🔒 Scoped Style (Recommended)

✔ CSS applies only to this component

🧩 Step 5: Create Another SFC Component

📄 src/components/Home.vue

Use it in App.vue:

Why SFC is Best for Real Projects

Feature	Benefit
Single file	Easy maintenance
Scoped CSS	No style conflicts
Reusable	Component-based
Tooling	IDE & build support

❌ Common Beginner Mistakes

❌ Forgetting export default
❌ Writing logic in <template>
❌ Not using scoped styles
❌ Large components (split them)

✅ Best Practices

✔ One component = one responsibility
✔ Keep SFC under control
✔ Use components folder
✔ Use scoped styles
✔ Move logic to composables later

🏁 Conclusion

Your first Vue SFC web page is now ready 🎉
Single File Components are the backbone of professional Vue applications.

Vue First SFC Web Page