Home » VueJS Tutorial

VueJS – Single File Components

Learn about the Single File Components in VueJS.
Submitted by Venkatesan C, on March 03, 2022

.vue File

A .vue file is a custom file format in Vue that uses HTML-like syntax to describe the portion of the UI.

Each .vue file contains three top-level language blocks

• Template
• Script
• Style

1. The template is like the HTML of your UI.
2. The script block is where the logic, data, and functionality of your app are maintained.
3. The CSS block is where you specify the styles related to the markup in the template block.

Browsers don't understand the .vue files, webpack, and bundlers with Vue loaders will extract the HTML, CSS, and js from .vue files and assemble them into a format that's understandable by the browsers.

Components

.vue file is called a component. It has the functionality, style, and structure for a portion of the UI.

• Components can be used multiple times, at the end of the article, you could see this.
• Components give the application a better way to maintain, wire up the logic to keep the state and UI of the application in a declarative way.
• Component structure gives the application a modular structure.

When to use Vue?

It's always recommended to use the .vue approach, wherever a build setup gives a good experience to the development process since there are certain benefits associated with it. They are:

• Hot module replacement support
• IDE support for auto-completion and auto-generated code snippets,
• More compatible to use with composition API
• Can use component scoped CSS
• The modularized way which leads huge maintainability over the traditional approach
• Precompiled

Here is the project structure that has been created by Vite. The name of the app is second-app, which is exactly the application that's been created in the Installation article.

As you can see there are two .vue files created by default by Vite. They are:

• HelloWorld.vue
• App.vue

Now look at App.vue and HelloWorld.vue files,

App.vue

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

HelloWorld.vue

<script setup>
   import { ref } from 'vue'
   
   defineProps({
     msg: String
   })
   
   const count = ref(0)
</script>
<template>
   <h1>{{ msg }}</h1>
   <p>
      Recommended IDE setup:
      <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
      +
      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
   </p>
   <p>
      <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
      </a>
      |
      <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
   </p>
   <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
      Edit
      <code>components/HelloWorld.vue</code> to test hot module replacement.
   </p>
</template>
<style scoped>
   a {
   color: #42b983;
   }
</style>

Remove all the <p> tags inside <template> for simplicity.

<script setup>
   import { ref } from 'vue'
   
   defineProps({
     msg: String
   })
   
   const count = ref(0)
</script>
<template>
   <h1>{{ msg }}</h1>
</template>
<style scoped>
   a {
   color: #42b983;
   }
</style>

As you can see there are three top-level blocks in each of the files, they are

• <script>
• <template>
• <style>

You can see import HelloWorld from './components/HelloWorld.vue' , which imports the Helloworld component from the HelloWorld.vue and uses it in the App.vue.

You can nest components within components as you nest HTML elements. Vue components are much like HTML components, with custom functionalities to bind logic, state, and styles in a declarative way.
In the HelloWorld.vue file, in the <script> tag you have props called msg of type String.

Props (properties) are like attributes that you use to pass data to the Vue Components, let's say you pass from a parent component to a child component. Here msg is a prop.

defineProps({
  msg: String
})

And you have <h1>{{ msg }}</h1> inside <template> tag.

Now look at the App.vue file, you use <HelloWorld> component inside the template tag with an attribute called msg with value "Hello Vue 3 + Vite".

<HelloWorld msg="Hello Vue 3 + Vite" />

Change the value to msg="Hi this is Vue". Now look at the output.

Now add another <HelloWorld.vue> with the msg attribute's value as "This is another HelloWorld component".

Now the <template> in App.vue will look like this:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hi this is Vue" />
  <HelloWorld msg="This is another HelloWorld component" />
</template>

Now the output will be,

From the above output, it is evident that you can declare a component once in a form of a .vue file and use it multiple times with different data passed to it via props. With this type of pattern, you wire up the logic, state, and structure in a declarative way.

Hence we can say SFCs are building blocks of Vue applications. With this, comes the end of the article. Hope you had a great reading.

---