Vue-komponentin rakenne

Jokaisen komponentin tulee koostua kahdesta seuraavasta tagista:

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

Tagissa template tulee kirjoittaa merkintäkieli, eli komponenttimme esitys:

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

Ja tagissa script tulee kirjoittaa komponenttimme JavaScript-koodi. Tämän koodin tulee olla objekti, joka viedään komponenttitiedostostamme:

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

Viedyissä objekteissa määritetään komponentin erilaisia asetuksia ja funktioita. Yksi asetuksista on komponentin nimi:

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