Vuejs basic component syntax

Component.vue

<template>
  <!-- here you define the component's HTML markup - remember: all the markup should be wrapped by a "father div" -->
  <!-- like:
    div
      all your markup
    /div
  -->
	
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<style lang="scss">
/*
* here you can define all the style
* if you have a reset or a normalizer,
* this is a good place to define all the modifiers
*
* you can also scope the style so only this component will have access
* in the style tag, use the "scoped" attribute
*/

p{
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  margin: 0 auto 2.5rem;
}
</style>

<script>
/*
* beyond the name, here you can define child components,
* props, methods, filters, data...
*/

export default {
  name: 'Component',
  data() {
    return{
      msg: 'This is our awesome vuejs component!'
    }
  }
}
</script>