In this episode, we’re easing into Alpine.js—perfect if you’ve never used it before. We'll start from scratch by setting up a fresh Laravel project, using the handy starter kit with Blade and Alpine.js (no Livewire or Inertia needed). We’ll quickly run through initializing the project, setting up the database, and making sure everything runs smoothly so that we can test form-based features right away.
Once the project is ready, we dive into the basics of Alpine.js. We take a look at where Alpine fits into the project setup, check out how it’s made available on the window object, and then jump straight into writing some Alpine code.
You’ll see how to turn any HTML element (like a login form) into an Alpine component using the x-data
attribute. We touch on adding data to the component, triggering JavaScript with x-init
, and even outputting variables into the page using x-text
. If you’ve ever worked with Vue, this will probably feel pretty familiar.
By the end of this episode, you’ll have a solid grasp of Alpine basics and see how easy it is to hook into forms and other elements. This will set us up for the next episode, where we’ll get hands-on with connecting the form to actions like grabbing a Google token on submit.