<template>
    <div>
        <h1>Hello, {{person}}. </h1> 
    </div>
</template>

<script>
    export default {
      name: "NameOfComponent",
      props: {
        name: type
      },
      data: function() {
        return {
        
        }
      },
      methods:{
          handleMyEvent: function() {
    
      }
    };
</script>

<style scoped>
h1 {
  color: green;
}
</style>

<template>
    <div>
        <h1>Hello, {{person}}. </h1> 
    </div>
</template>

<script>
export default {
  name: "WelcomeMessage",
  props: {
    person: String
  }
};
</script>


<style scoped>
h1 {
  color: green;
}
</style>

<template>
  <div id="app">
    <WelcomeMessage person="Paul"/>
  </div>
</template>

<script>
import WelcomeMessage from './components/WelcomeMessage.vue'

export default {
  name: 'app',
  components: {
    WelcomeMessage
  }
}
</script>