โครงสร้างคอมโพเนนต์ Vue

คอมโพเนนต์ทุกตัวควรประกอบด้วย แท็กทั้งสองต่อไปนี้:

App.vue<script>

</script>
<template>

</template>

ในแท็ก template ควรเขียน มาร์กอัป นั่นคือ ส่วนแสดงผล ของคอมโพเนนต์ของเรา:

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

และในแท็ก script ควร เขียนโค้ด JavaScript ของคอมโพเนนต์ของเรา โค้ดนี้ควรเป็น วัตถุที่จะถูกส่งออก จากไฟล์คอมโพเนนต์ของเรา:

App.vue<script>
  export default {

  }
</script>

ในการส่งออบเจ็กต์ออก จะระบุ การตั้งค่าและฟังก์ชันต่างๆ ของคอมโพเนนต์ หนึ่งในการตั้งค่านั้นคือชื่อ ของคอมโพเนนต์นี้:

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