In Vue (Vue 2 and 3), you use the v-bind directive—or its shorthand, a colon (:)—to pass variables to components.

Here is the exact equivalent of React's <Greeting title={title}/>: **

<!-- The shorthand (most common) -->
<greeting :title="title" />

<!-- The full syntax -->
<greeting v-bind:title="title" />

The Key Difference

• React (JSX): Uses curly braces {} to tell the compiler, "evaluate this as JavaScript."
• Vue (Templates): Uses the : prefix to tell the compiler, "evaluate the string inside the quotes "" as JavaScript."

If you forget the colon and just write <greeting title="title" />, Vue will pass the literal text string "title" rather than the variable.

A Note on Casing

Because Vue templates are valid HTML (which is case-insensitive), the standard convention is to use kebab-case for component names and props in the template, even if you define them using camelCase in your JavaScript script.

For example, if you have a prop named userProfile:

JavaScript

// React
<GreetingApp userProfile={profile} />

// Vue 2 and Vue 3
<greeting-app :user-profile="profile" />