Vue: How its Single File Components structure works

The field of frameworks becomes more extensive with the passing of the years. There are already several available for the use of developers, each of them with special characteristics that make it preferred by some groups, among these, Vue stands out.

According to the definition given on its official website, Vue is a progressive-style framework designed to create user interfaces. One of the main things that sets it apart from other monolithic frameworks is that it was designed to be incrementally adoptable.

Vue works with a structure of Single Files Components that distinguish it from other frameworks and we explain how exactly this process works.

This is how Vue's Single Files Components structure works

A Single Files Components structure is responsible for separating the component content into: HTML Markup (<template>), Behavior (<script>) and Styles (<style>).

Luis Lau, Rootstack developer and an expert in Vue, explains how this framework using the Single Files Components structure differs from other similar frameworks such as Angular and React.

“It differs from Angular for example because a component exists within a single file, and its parts are not segregated in multiple files. And templates differ from React because they are written declaratively in a format that is a superset of HTML (that is, all HTML is also a valid Vue template), and not necessarily with JSX (although it is possible to use JSX and other templating engines as well)".

He also talked to us about how configurable Single Files Component are, allowing the developer to:

• Use alternative HTML templating languages ​​(e.g. Pug)
• Use alternative CSS preprocessor languages ​​(e.g. SCSS, Stylus, Less)
• Use alternative JS preprocessor languages ​​(e.g. Typescript, Dart)
• Alternatively, don't use <template> for one or more components, and instead provide a render function, similar to React
• Alternatively, separate certain parts of the SFC into other files. For example, some prefer to include styles outside of SFCs