How to add a Stimulus controller?

I have some confusion about Stimulus. How can I add a controller and use the mix feature?

for example I want to add a click event for a button

⁨3⁩ ⁨comments⁩

⁨3⁩ ⁨Comments⁩

Answer

Toby

Waterhole Founder

Jun 21, 2023

Hi @mtdmy, you'll need to:

Create a new Stimulus controller at resources/js/controllers/hello_controller.js, and then register it with Waterhole's Stimulus instance in resources/js/app.js:

import HelloController from './controllers/hello_controller';

window.Stimulus.register('hello', HelloController);

Set up a JavaScript compilation step - probably the easiest way is to use Laravel Mix. Output your compiled JavaScript to resources/dist/app.js.
Add this script to Waterhole's JavaScript bundle in your service provider:

Extend\Script::add(resource_path('dist/app.js'));

Hopefully that's enough to get you started – let me know if you have any specific questions.

mtdmy

Jun 25, 2023

In reply to

Toby

I'll try . tanks

mtdmy

Jul 13, 2023

In reply to

Toby

Hello Toby,

Recently, I've been working on some demos, but I've run into some issues with organizing my frontend configuration. Specifically, I'm wondering how I can manage files like package.json, tsconfig, and webpack.mix.js.

Would you happen to have any advice or a demo you could share with me? I've already checked out the Waterhole extension template, but unfortunately, I didn't find what I was looking for there.

Thank you for your help!