Our First Single File Component (SFC) Web Page

Welcome to The Coding College! In this tutorial, we’ll build our first Single File Component (SFC) web page using Vue.js. Single File Components are a hallmark of Vue.js development, allowing developers to encapsulate HTML, JavaScript, and CSS in a single .vue file.

By the end of this guide, you’ll have created a basic SFC-based Vue.js web page and learned the fundamentals of structuring Vue applications.

What Is a Single File Component (SFC)?

An SFC in Vue.js is a .vue file that combines the following in one place:

  • Template: The HTML structure of the component.
  • Script: The JavaScript logic and functionality.
  • Style: The CSS styling, optionally scoped to the component.

Here’s a basic structure of an SFC:

<template>
  <!-- HTML content -->
</template>

<script>
export default {
  // JavaScript logic
};
</script>

<style scoped>
/* CSS styling */
</style>

Setting Up Your Vue Project

Before we start, ensure you have the necessary setup for a Vue.js project.

Prerequisites

  1. Node.js and npm installed on your system.
  2. Vue CLI for project scaffolding.

Create a Vue Project

Run the following commands to create and set up a new Vue project:

npm install -g @vue/cli
vue create my-first-sfc
cd my-first-sfc
npm run serve

This starts a development server at http://localhost:8080/.

Building Our First SFC

Step 1: Create the SFC File

Navigate to the src/components directory and create a new file called MyFirstPage.vue.

touch src/components/MyFirstPage.vue

Step 2: Add the Template Section

Define the structure of your web page in the <template> block.

<template>
  <div class="page">
    <header>
      <h1>Welcome to My First SFC</h1>
    </header>
    <main>
      <p>This is a simple web page built with Vue.js SFC.</p>
    </main>
    <footer>
      <p>© 2024 The Coding College</p>
    </footer>
  </div>
</template>

Step 3: Add the Script Section

Add the JavaScript logic for your component in the <script> block.

<script>
export default {
  name: 'MyFirstPage',
  data() {
    return {
      message: 'Hello, Vue SFC!'
    };
  }
};
</script>

Step 4: Add the Style Section

Style your web page with the <style> block. Use scoped to limit styles to this component.

<style scoped>
.page {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
}

header h1 {
  color: #333;
}

footer {
  margin-top: 20px;
  font-size: 0.9em;
  color: #777;
}
</style>

Step 5: Import and Use the SFC

Now that your SFC is ready, let’s include it in the main application.

Edit App.vue

Replace the content of App.vue with the following:

<template>
  <div id="app">
    <MyFirstPage />
  </div>
</template>

<script>
import MyFirstPage from './components/MyFirstPage.vue';

export default {
  name: 'App',
  components: {
    MyFirstPage
  }
};
</script>

<style>
/* Add global styles here if needed */
</style>

Step 6: View Your First SFC

Run your development server with the following command:

npm run serve

Visit http://localhost:8080/ in your browser to see your first Vue SFC-based web page in action!

Enhancing Your SFC Web Page

1. Adding Interactivity

Let’s add a button to update the message dynamically.

Update the MyFirstPage.vue template:

<main>
  <p>{{ message }}</p>
  <button @click="updateMessage">Change Message</button>
</main>

Update the script section:

methods: {
  updateMessage() {
    this.message = 'You clicked the button!';
  }
}

2. Dynamic Styling

Apply dynamic styles based on a condition.

Add this to your <script>:

data() {
  return {
    message: 'Hello, Vue SFC!',
    isHighlighted: false
  };
},
methods: {
  toggleHighlight() {
    this.isHighlighted = !this.isHighlighted;
  }
}

Update the <template>:

<main>
  <p :class="{ highlighted: isHighlighted }">{{ message }}</p>
  <button @click="toggleHighlight">
    Toggle Highlight
  </button>
</main>

Add the CSS:

.highlighted {
  color: white;
  background-color: #007BFF;
  padding: 5px 10px;
  border-radius: 5px;
}

Conclusion

Congratulations! You’ve built your first Single File Component in Vue.js. This modular approach makes it easy to manage templates, logic, and styles in one file, setting a strong foundation for building scalable and maintainable applications.

For more in-depth tutorials on Vue.js and other programming topics, visit The Coding College.

Leave a Comment