Single-file components

We know from the old best practices that it is always good to separate HTML from CSS and JavaScript files. Some modern frameworks such as React are relaxing and gradually wiping out this rule. Nowadays, you will not be shocked by looking at the small file or the component that contains its own markup, style, and application code inside it. Actually, for small components, we even find it more convenient to have such architecture. Vue also allows defining everything related to the same component in the same file. This kind of component is known as a single-file component.

Note

A single-file Vue component is a file with a .vue extension. The application that contains such components can be built using the webpack vue configuration. To scaffold an app with such a configuration, the easiest way is to use vue-cli ( https://github.com/vuejs-templates/webpack).

A Vue component can have up to three sections in it:

• <script>
• <template>
• <style>

Each of these sections...