--- title: Single File Components --- # Single File Components One of the many benefits of using Vue, is the option of making a Single File Component. This component, as the name suggests, is a regular Vue component, living in its own file. Having your component in its own file, enables you to have a better structure and overview of your application. It also enables you to have syntax highlighting in your editor of choice. ## Structure A Single File Component is made up of three sections: * Template, where you put your HTML that makes up the component * Script, where your logic exists * Style, where your styling to your component exists ## Template You can use the default language, HTML, or you can use other templating engines, such as `Jade` or `Pug`. ```html ``` Basic example of html in a single file component ## Script The script section is where all of your logic exists. You can use the default language, JavaScript. You also have the option of using `TypeScript` instead. It's also in this section all of your properties, methods and watchers exists, to make your component work. ```html ``` You can check out how to use Vue, either by browsing this site, or checking out Vue's own documentation, [here](https://vuejs.org/v2/guide/index.html) ## Style The final block in the single file component house. This section is where you can style your component. You can also choose, whether or not it should be non-scoped or scoped. Scoped means that the compiled code automatically gets ID's that is specific to the component, that the styling will affect. Non-scoped means that elements outside of the component, also will get targeted for the styling. ## Read more If you want to read more about the Single File Components, you can do so [here](https://vuejs.org/v2/guide/single-file-components.html)