Single File Components

How Does SFC Work?

The browser does not understand what a .vue file is, so in the actual project, we generally  integrate the SFC compiler with a build tool such as Vite or Vue CLI(which is based on webpack). 

The webpack with the vue loader is going to parse the file, extract each of the three blocks(<script>,<template> and <style>) and pipe them through other loaders if necessary and finally assemble them back into a format that the browser can understand.

Since we will use build tools like Vite or Vue CLI, we don’t need to worry about the whole build process. 

A compiled SFC is a standard JavaScript (ES) module - which means with proper build setup, you can import an SFC like a module:

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

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

You can also try this code with Online Javascript Compiler

Run Code

Advantages of Using SFC

1.) We need Single File Components because the components defined using Vue.component can’t scale into larger projects.

2.) The codebase is divided into one or more .vue files where each file is responsible for its own markup, styles, and logic. It helps in scalability.

3.) We can create modularized components using familiar HTML, CSS, and JavaScript syntax.

4.) We get syntax highlighting, modules, and component-scoped CSS with single-file components.

5.) SFC provides more compile-time optimizations by cross-analyzing template and script.

Separation of Concerns

In vue, instead of dividing the codebase into three huge layers that form the User Interface, the codebase is instead divided into one or more .vue files where each file is responsible for its markup, styles, and logic.

It is being said that SFCs are mixing different concerns in the same place - which HTML/CSS/JS were supposed to separate. 

The best answer to this problem is that the separation of concerns is not equal to the separation of file types. Our utmost goal must be to improve the maintainability of codebases. Separation of concerns, when applied directly as separation of file types, does not help us reach that goal in the context of huge front-end applications.

In modern front-end development, we have found that instead of dividing the codebase into three huge layers that interlinked with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic, and styles are inherently bound, and grouping them actually makes the component more cohesive and maintainable.

FAQs

1. What are the top-level blocks present in SFC?
   SFC consists of three types of top-level blocks <template>, <script> and <style>.
    
2. Is SFC better than Vue.component?
   Yes, SFC is better than the Vue.component in terms of the project's scalability.
   If we want to use the Vue.component on a larger project, we have to create an element to house them and our templates to string in a script tag. Strings don't have syntax highlighting support for templates. They are both a pain if a component is more extensive or has lots of nesting. 
    
3. What are the common build tools used with the SFC compiler?
   Vite and Vue CLI are the most common build tools used with the SFC compiler to parse the .vue file.

Key Takeaways

This article taught about Single File Components in Vue Js and the benefits of using SFC in our Vue project.

If you want to read more exciting web development blogs, you can visit Coding Ninjas Web Blogs. Also, If you are curious to learn advanced front-end web development, Coding Ninjas is here with one of the best courses available, which you can find here. 

Happy Learning!!