#63 Hotwire Modals (the right way)

13/02/2022
modals

⛔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
Join the conversation
Sign in to access PRO lessons, access private repos, leave comments, create watch lists.
We collect your email address, name and username to create your account. We do not share your email address with anyone else.