#30daysofVue - Day 16 - Single File Components
Single File Components allow us to define the HTML/CSS and JS of a component all within a single .vue file.
A single-file component is composed of three parts:
section which contains the component’s markup in plain HTML.
section which contains all the JS logic within that component.
<style>section which contains all the component styles.
Though the structure of a single-file component may look different, everything we’ve discussed thus far with regards to instance/component properties remains the same. We’re able to use all the properties a Vue instance component contains like data, methods, computed properties, lifecycle hooks, etc.
The main advantage of using single-file components is how we’re able to neatly define the markup, logic, and styles of a component all within a single file.