#63 Hotwire Modals (the right way)

13/02/2022
Free

⛔DO NOT use a StimulusJS controller to render TurboStreams!⛔

Extended text guide to this video: https://www.bearer.com/blog/how-to-build-modals-with-hotwire-turbo-frames-stimulusjs

P.S. Feel free to add CSS p-5 bg-slate-300 absolute z-10 top-10 right-10 rounded-md w-96 break-words to the modal, so that it shows nicely above page content.

0:00 Intro
0:49 App Demo
2:12 Create New App
3:20 Scaffold Posts
4:44 Turbo Frame Modal
7:40 Add validations...
8:50 No matching turbo frame
9:35 Turbo Stream - to add new post
11:25 StimulusJS - dismiss modal
17:30 Modal to EDIT a post
20:20 Outro

0
Sign in to join the conversation