Alpine Test XTEXT

x-text sets the text content of an element to the result of a given expression.

Unlike Vue, Alpine doesn’t use a mustache-like syntax for interpolation.

Instead, it uses the x-text and x-html directives for interpolation, which work the same way as their Vue counterparts.

The x-text directive works similarly to x-bind but instead of updating the values, it updates the innerText of an HTML element.

Code

<p x-data="{ msg: 'Hello Alpine.js' }" x-text="msg"></p>

<div x-data="{ username: 'phiofx' }">
    Username: <strong x-text="username"></strong>

    <svg>
        <text x="100" y="100" x-text="username"></text>
    </svg>
</div>

Result