Vue Component Structure

Each component must consist of the following two tags:

App.vue<script>
  
</script>
<template>
  
</template>

In the template tag you should write the layout, that is, presentation of our component:

App.vue<template>
  <div>
    Hello World
  </div>
</template>

And in the script tag, you should write the JavaScript code of our component. This code should be an object that will be exported from our component file:

App.vue<script>
  export default {
    
  }
</script>

The exported object specifies various settings and functions of the component. One of the settings is the name of this component:

App.vueexport default {
  name: 'App',
}