When I started working on this site, I was a little worried about how to break up the Blade and Vue templates. I love Vue and feel most comfortable building views with Vue, but the pages on this site don’t need AJAX calls and SPA-like functionality. I could totally go down that route, but it seemed simple and more user-friendly to just generate the views server-side with Blade templates and pass along props to any Vue components I might have as per Caleb Porzio’s suggestion.

I still wanted to try my hand at making AJAXy forms so I could use Sweet Alert to do fancy message pop-ups. Probably unnecessary, but I wanted to try it. I then worried about people needing JavaScript just to do a simple form. So, in the event that JavaScript isn’t available, I want the form to just be a regular form, but if JavaScript is available (as it usually will be), it used the Vue component. Luckily, whatever you stick in a Vue component’s slot will render when no JavaScript can be used. My solution was to wrap my forms with a renderless Vue component that spits up needed functions and data through a scoped slot. Here’s that component.

Definitely not perfect, but it’s an interesting use case for scoped slots and renderless components.