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`

<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 It’s applications.

Vue First SFC Web Page