We have learned about components in Components in Vue3 . Here, the components can be registered using either global or local registration. These syntax are designed to suit small sized projects. But when it comes to large sized projects, below problems may happen,

1. Unique component name for each component
2. Since template type is string, poor look for large size templates
3. Failed to apply syntax highlights for template
4. Html(template string) and JavaScript are placed into component objects where CSS left out.

So a single file component(SFC’s) is the solution for above problems with .vue extension. Note that build tools like Webpack are used to parse and compile the .vue file.

Single file Components – SFC’s Syntax

SFC’s has three parts in the .vue file which are,

1. Template – HTML design of the component.
2. JavaScript – Supports common JS modules.
3. CSS – Scoped CSS which applies to elements of components alone.

Component.Vue

<template>
  <div>
    <!-- Write HTML for the component here -->
  </div>
</template>

<script>
// Write JavaScript for the component here
</script>

<style scoped>
/* Write CSS for the Component here.*/
/* Note that scoped attribute, apply css 
to this component HTML element only  */
</style>

Looks so pretty right!. The Single File Component in Vue.js makes the component so simple to use. And also it solved the problems that occurred in normal components.

• The HTML elements of the component are much simplified now.
• You can use syntax highlights for template ( I preferred Vetur).
• JavaScript part of the component are separated rather than insisting the same in the component object.
• Scoped CSS is introduced where its CSS apply to the component template HTML element.

Single file Components – SFC’s Example

Now, we are going to create a simple button component using SFC’s. Button Component has two props namely color and label.

CustomButton.vue

<template>
  <div class="btn-root">
    <button class="btn-custom" :style="{ color: color }">
      {{ label }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    color: String,
    label: {
      type: String,
      required: true,
      default: "none",
      validator: function (value) {
        // should return true, if the prop is valid
        return !!value;
      },
    },
  },
};
</script>

<style scoped>
.btn-custom {
  width: 200px;
  height: 50px;
}
.btn-root {
  margin: 8px;
}
</style>

Now we are going to use the CustomButton Component in our Application. Let me show you with the below example !

App.vue

<template>
  <div>
    <CustomButton color="red" label="Red Button" />
    <CustomButton color="green" label="Green Button" />
    <CustomButton color="blue" label="Blue Button" />
  </div>
</template>

<script>
import CustomButton from "./components/CustomButton";
export default {
  components: {
    CustomButton,
  },
};
</script>

So we have created different colored buttons with different labels using CustomButton Components.

Single file Components – SFC’s Vue Loader

Indeed, three types of single file components are processed by a vue loader. vue-loader parses the SFC’s file, extracts each language block and finally computes them into ES modules which is nothing but the Vue.js component option object.

vue-loader also supports non default languages like CSS pre-processors and compiles them into HTML. For example we can use Sass in our component to style the elements by specifying the attribute in the CSS block as below,

<style lang="sass">
  /* you can write Sass here! */
</style>

Template Block

• Each .vue file may contain template blocks.
• The template will be passed to vue-template-compiler where the content is compiled into JavaScript render functions and injected in the component script block.

Script Block

• Each .vue file may contain a script block.
• The plain object or constructor created by Vue.extend is supported, but exporting the object should be a component options object.

Style Block

• Each .vue file may contain style block
• The style tag may have scoped, modules or mixed tags in the same component. Default lang attribute is CSS.

Scoped CSS – Special Feature

Using scoped attributes in the style tag, the CSS will be applied to the current component only. Let me explain the same using below example,

<div>
  <div class="btn-root" data-v-75f860b3="">
    <button class="btn-custom" data-v-75f860b3="" style="color: red;">
      Red Button</button>
  </div>
  <div class="btn-root" data-v-75f860b3="">
    <button class="btn-custom" data-v-75f860b3="" style="color: green;">
      Green Button</button>
  </div>
  <div class="btn-root" data-v-75f860b3="">
    <button class="btn-custom" data-v-75f860b3="" style="color: blue;">
      Blue Button
    </button>
  </div>
</div>
<style type="text/css">
  .btn-custom[data-v-75f860b3] {
    width: 200px;
    height: 50px;
  }

  .btn-root[data-v-75f860b3] {
    margin: 8px;
  }
</style>

Note that id data-v-75f860b3  is generated using PostCSS. So the style will be applied to this component alone. At the same time if we want to use styles as globally, we can use global styles as like below

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

Here global style is not scoped which means it will be available throughout our application.

Conclusion

So SFC’s single file component is the very special feature in the Vue.js framework. It will ease the Component structure by segregating components into three parts (template, script, style). Unlike global/ local registered components, SFC’s are well suited for large sized applications.