Stimulus Cheatsheet

References

• Homepage: https://stimulusjs.org/
• Github: https://github.com/stimulusjs/stimulus

Sample controller

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = [ 'foo', 'bar' ]

  initialize () {}

  connect () {}

  disconnect () {}
}

Lifecycle callbacks

• initialize: once, when the controller is first instantiated
• connect: anytime the controller is connected to the DOM
• disconnect: anytime the controller is disconnected from the DOM

Actions

An action could be invoked by using data-action="event->controller#method"

An element could have multiple actions from same or different controllers, separated by space.
e.g. data-action="product#addToCart card#updateItems"

List of tags with default action:

a -> click
button -> click
input[type=submit] -> click

form -> submit

input -> change
select -> change
textarea -> change