Stimulus Twig helpers
Wire a controller from your template.
Three Twig functions write the data attributes Stimulus looks for. The markup stays readable, and the controller stays plain JavaScript.
stimulus_controller
This function attaches a Stimulus controller to an HTML element and allows passing values (via data-attributes) that can be accessed within the controller.
These values are useful for providing dynamic data or configuration to your controller’s logic.
<div {{ stimulus_controller('userProfile', {userId: 42, theme: 'dark'}) }}>
Welcome to your profile!
</div>
{# would render as #}
<div data-controller="userProfile" data-user-profile-user-id-value="42"
data-user-profile-theme-value="dark">
Welcome to your profile!
</div>stimulus_target
This function defines one or more targets within a Stimulus controller. These targets allow you to interact with specific DOM elements directly from your controller’s logic.
<div {{ stimulus_controller('userProfile') }}>
<span {{ stimulus_target('userProfile', 'name') }}>John Doe</span>
<span {{ stimulus_target('userProfile', 'avatar') }}>
<img src="avatar.jpg" alt="John's Avatar">
</span>
</div>
{# would render as #}
<div data-controller="userProfile">
<span data-user-profile-target="name">John Doe</span>
<span data-user-profile-target="avatar">
<img src="avatar.jpg" alt="John's Avatar">
</span>
</div>stimulus_action
This function attaches an event listener to an HTML element, defining actions that trigger specific methods in the controller.
This simplifies event handling by mapping DOM events (like click, input, etc.) directly to
controller methods, improving the clarity and maintainability of your code.
<button {{ stimulus_action('userProfile', 'save', 'click') }}>
Save Profile
</button>
{# would render as #}
<button data-action="click->userProfile#save">
Save Profile
</button>
