A single-file component is a file with a .vue
extension that contains a Vue component. It contains the component’s template, logic, and styles all bundled together in one file. It consists of one <script>
block, optional <template>
and <style>
blocks, and possible additional custom blocks.
To use one, you need to set up Vue Loader for parsing the file (usually done as part of a webpack building pipeline). But this then also supports using non-default languages such as Sass or HTML templating languages with pluggable pre-processors.