Blog>
Snippets

Using Props in Component Templates

Display how to bind props to the template of a Vue.js 3 component and render the values in the DOM.
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'message'],
};
</script>

<style>
/* Add style if necessary */
</style>
This is a Vue component template. The component expects two props: 'title' and 'message'. These props are bound to the template and their values are rendered inside <h1> and <p> tags respectively.