Single File Vue Components
A single file Vue component is treated as its own "mini application" within itself. You can, of course, nest components within components. In fact, that is what is really happening under the hood. The Vue.js application is one large component that is bootstrapped and injected into one single Vue component, which is then bootstrapped into a single Vue instance.
The single file Vue component combines all three aspects of a component (the template, the JavaScript, and the CSS) into one file. This allows component to be self contained and easier to maintain.
<template>
<p>{{ greeting }} World!</p>
</template>
<script>
module.export = {
data: function () {
return {
greeting: 'Hello'
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>