Props with Default Values

Show how to specify default values for props in a Vue.js 3 component if no value is provided by the parent.
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>

export default {
  props: {
    title: {
      type: String,
      default: 'Default Title'
    message: {
      type: String,
      default: 'Default message content'

h1 {
  color: #333;
p {
  color: #666;
In this Vue.js component, default values for the 'title' and 'message' props are set using the 'default' property inside the 'props' option. If the parent does not provide a value for the 'title' or 'message' props, the component will use 'Default Title' and 'Default message content' as default values, respectively.