$data Magic Property

Get the entire reactive data object of the component.

What is $data?

$data gives you the complete reactive data object of the current component. You can inspect it, pass it to external functions, or stringify it for debugging.

When to Use

Use $data for debugging (e.g., logging the whole state before an action) or when you need to send the entire component state to an API or parent component.

Example

Code

<div x-data="{ name: 'Alpine', version: 3 }">
  <button @click="console.log($data)">Log all data</button>
</div>

💡 Tip

Be careful when passing $data to JSON.stringify – reactive proxies may contain circular references. Use Alpine.raw($data) to get the plain object first.

Helpful? Share this page!↑ Back to top