ViewComponent Crash Course with Ruby on Rails

ViewComponent is a powerful gem that allows you to create reusable, testable, and encapsulated view components in Ruby on Rails applications.
ViewComponent was developed by the GitHub team and has since been adopted by many developers looking for more structure than the default partials and helpers provided by Ruby on Rails. This crash course will review ViewComponent's use case and explore how it might fit your next Rails app.
Source code: github.com/jus...
Timestamps:
00:31 - What is ViewComponent
01:30 - Benefits of ViewComponent
03:00 - Create a new Rails app
04:00 - Add ruby gems
04:15 - Basic app configuration
11:43 - Generate first ViewComponent
13:00 - Add application component
14:25 - ButtonComponent setup
18:15 - Add Tailwind CSS, component classes
19:44 - Rendering a ViewComponent
22:29 - Generate and configure BlogPostComponent
28:03 - Generate and configure AvatarComponent
31:39 - ViewComponent Slots
32:40 - Generate Nav-based components and LogoComponent
37:33 - Render navigation components with slots
41:05 - ViewComponent Tests
43:58 - Final thoughts and opinions
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: www.youtube.co...
⚡️Upcoming FREE course - Reserve your spot now and get on the mailing list.
hellohotwire.com
💻 Read the written version:
web-crunch.com...
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
hellorails.io
💻 The Blog (my source of truth): webcrunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: railsui.com.
👨‍💻 Hire me: Visit: railsui.com/cu...
🐤 / webcrunchblog .
⚙️ github.com/jus....
Also, this stuff takes a long time to make, but I love to do it. To help me keep at it, consider supporting me. If not monetarily, subscribe to the channel or share it with someone!
✨ github.com/spo...
☕️ www.buymeacoff...

[@erinclaudio9211]

Thank you for adding the config section it is appreciated!

[@Webcrunch]

Happy to help!

[@ledockol]

Thanks!

[@joshvandergrift]

Nice! 💪

[@abdullahsaleh7196]

Keep it up🫡

[@andyhemphill]

could you create a turbo frame as a component - say as a slideover

[@jl789nz]

You can use turbo frame tags inside of components.

[@Webcrunch]

Yep! It would need to be inside the template as a normal turbo frame and should work fine. You'll need to consider passing a unique id of course.

[@josbexerra8115]

Muchsa gracias Mister crunch...

[@Webcrunch]

Hope it's helpful!