The Single File Vue Component

Each 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.

<template>
  <div><!-- must have one root element, the template tag does not count as a root element -->
    <h1>I am one component of many!</h1>
    <p>{{ framework }} is a great JavaScript framework! I can import and nest other components!</p>
    <another-component></another-component>
  </div>
</template>

<script>
import AnotherComponent from '@/components/AnotherComponent';

export default {
  name: 'MyComponent',
  components: {
    AnotherComponent
  },
  data() {
    return {
     ...