In this episode, we're kicking things off by getting Alpine.js up and running inside our Laravel project. We'll walk through the process step by step: first, we'll use npm to install Alpine.js (instead of just dropping in a CDN link), and then we'll talk about how to import Alpine into your app.js file.
Once Alpine is brought in, you'll see how to attach it globally to the window object and start it up so it’s ready to use in our Blade templates. If you’re using a Laravel starter kit, you might already have this done for you, but we’ll make sure you know exactly what’s happening either way.
Next, we'll do a quick test to make sure everything is working. We'll turn a simple <div> into our first Alpine component, show you how x-data and x-init work, and demonstrate using a mock value with our soon-to-be date picker. This is a nice sneak peek of how Alpine lets you write little bits of JavaScript right where you need them, keeping things tidy and interactive.
By the end of the episode, you'll have Alpine set up and a good idea of how we'll use it throughout the app—especially as we build our availability calendar. In the next episode, we'll actually get our date picker input in place and see more of Alpine in action!