Basic Prop Validation

Demonstrate how to define a Vue.js 3 component with basic prop validation including type checks.

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'ExampleComponent',
  props: {
    // Define the prop 'title' of type String with a required validation
    title: {
      type: String,
      required: true
    },
    // Define the prop 'message' of type String with a default value
    message: {
      type: String,
      default: 'Default message'
    }
  }
});
</script>

<style>
div { text-align: center; }
h1 { color: #333; }
p  { color: #666; }
</style>

This Vue.js 3 component example named 'ExampleComponent' defines two props with basic validation. The 'title' prop is of type String and is required. The 'message' prop is also of type String, and it has a default value of 'Default message'. The template section renders both title and message within a div, styled with center-aligned text.