Alpine.js v3 Requires x-data as Function Instead of Plain Object

Direct Answer

Alpine.js v3 does not require x-data to be a function. Both plain‑object and function forms are accepted, exactly as in v2.

Confirmed Facts

• The Alpine.js v3 source accepts either an object literal or a function that returns an object for x-data.
• The only situation where a function is mandatory is when x-id is present for server‑side rendering hydration; plain objects will fail hydration and produce a console warning.

Likely Explanation of Confusion

Developers migrating from v2 may have encountered the x-id requirement and assumed it applied to all x-data usage. The function form also offers benefits like reusability and access to Alpine.store, which can lead to the impression that it is now required.

Steps to Verify in Your Project

1. Create a test component with a plain object:

<div x-data="{ msg: 'hello' }"><span x-text="msg"></span></div>

2. Open the page in a browser; the text should render without errors.
3. Repeat with a function:

<div x-data="() => ({ msg: 'hello' })"><span x-text="msg"></span></div>

4. Both should work identically.
5. If you add x-id, test again:

<div x-data="{ msg: 'hello' }" x-id="test"></div>

6. Observe the console warning about hydration; switch to a function to eliminate it.

Performance Considerations

Since both forms are native, there is no compatibility shim. The function call adds a single invocation per component initialization—typically a few microseconds—while the plain object is a literal evaluation. After initialization, the reactivity system works on the returned object in exactly the same way, so no hidden costs affect subsequent state updates.

One Diagnostic Detail (if needed)

If you still see an error insisting that x-data must be a function, confirm whether any ancestor or the element itself has an x-id attribute; that is the only trigger for the requirement.