4. Hello Vue Component

A component, which prints the property it recieves in hello prop is created.

This is Hello.vue in the folder components.

<template>
  <h2>{{hello}}</h2>
</template>

<script>
export default {
  props: ['hello'],
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 250px;
}
</style>

This is App.vue which uses Hello component.

<template>
  <div>
    <app-hello hello="Hello Vue World"></app-hello>
    <app-hello hello="This is from a component"></app-hello>
  </div>
</template>

<script>
import Hello from './components/Hello.vue'
export default {
  components: {
    appHello: Hello
  }
}
</script>

This is the output: