Working with Single File Components in Vite/Vue

Tutorial 4 of 5

1. Introduction

In this tutorial, we'll explore how to work with Single File Components (SFCs) in Vue using Vite. SFCs are a unique feature in Vue.js that allow you to encapsulate HTML, CSS, and JavaScript within a single file, making it easier to manage and maintain your codebase.

Goals

Understand the concept of Single File Components in Vue.js
Learn how to set up and use Vite to serve, build, and manage Vue applications
Write, compile, and render Vue SFCs using Vite

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript
Familiarity with Vue.js (though not strictly necessary)
Node.js and npm installed on your machine

2. Step-by-Step Guide

2.1 Vue Single File Components

In Vue, a Single File Component (SFC) is a file with a .vue extension that encapsulates the structure (HTML), style (CSS), and behavior (JavaScript) of a Vue component within a single file. Here is a basic structure of a Vue SFC:

<template>
  <!-- HTML goes here -->
</template>

<script>
  // JavaScript goes here
</script>

<style scoped>
  /* CSS goes here */
</style>

2.2 Vite and Vue

Vite is a modern front-end build tool created by Evan You, the creator of Vue.js. It provides a faster and leaner development experience for modern web projects. Vite provides out-of-the-box support for Vue Single File Components.

To create a new Vite project with Vue, you can use the following command:

npm init @vitejs/app my-vue-app -- --template vue

After the project has been created, navigate into the project directory and install the dependencies:

cd my-vue-app
npm install

You can start the development server with:

npm run dev

3. Code Examples

Now that we have covered the theory, let's dive into some practical examples.

3.1 Creating a Basic Vue SFC

Create a file called HelloWorld.vue in the src directory. Paste the following code into the file:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

In this file, we've defined a template with a h1 tag that will display the message data property. The data property message is defined in the script section and the style section contains the CSS for the h1 tag.

3.2 Using SFC in Another Component

To use the HelloWorld component in another component, simply import it and register it in the components option. For example, in the App.vue file:

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

<script>
import HelloWorld from './HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

4. Summary

In this tutorial, we've learned about Vue's Single File Components and how to use them with Vite. We've also covered how to encapsulate HTML, CSS, and JavaScript within a single .vue file, and how to use such a component in another component.

5. Practice Exercises

Create a Vue SFC that displays a list of names passed to it via props.
Create a Vue SFC with a button and a counter. Each time the button is clicked, the counter should increment.
Create a Vue SFC that fetches data from an API and displays the data on the page.

For each exercise, make sure to structure your HTML, CSS, and JavaScript code within a single .vue file. As a hint, you might need to use Vue's props, data, and methods options.

Further Resources

Remember, practice is key when learning a new concept. Happy coding!