One Million Checkboxes with Laravel
This episode is for members only

Sign up to access "One Million Checkboxes with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
02. Laravel with Vue

Episodes

0%
Your progress
  • Total: 1h 17m
  • Played: 0m
  • Remaining: 1h 17m
Join or sign in to track your progress

Transcript

00:00
We're going to go old school here and set up a fresh Laravel project, but not with any specific
00:05
starter kit. We're just going to create a plain Laravel project and pull view in. We don't need anything like inertia. We don't need any kind of authentication functionality. So it doesn't make sense to pull any of this in. Okay, let's get started with a new project here. Of course, we're going to call this one million checkboxes. And we're not going to choose a starter kit here.
00:26
And we can just go through all of these options. When this prompts us for a database, we are going to choose MySQL. And we are going to just run the default migrations. And once that's done, we'll get this open. Okay, that's done. Let's go into here and open this up in our editor. And depending on how you're working locally, you should just be able to open this up in
00:46
your browser. I'm using Laravel herd. Okay, let's get started. So the first thing is, we'll come over to our web routes, we do not need this welcome page, this is going to be our home controller. So let's go and create out a home controller first of all for this. So let's make out a controller here called home controller, it's the only controller that we're going to need in
01:06
the entire application. Like I said, we're not going to be posting down any data to our back end. So let's go over to our home controller and hook this up. So we'll create an invoke magic method. And let's return out a view here, just called home, and we'll make that out. Okay, let's make that view out php artisan make view home, and we should be good. Okay, so if we come
01:29
over to the browser, again, obviously, we end up with a completely empty page. Let's go ahead and create out a layout for our entire app. So we'll go and make out a component. And let's call this layouts and app and we'll use the view flag because we don't need a class associated with this. Okay, so now that we've done that, we can come over to home.glade.php. And we can replace this
01:54
out with the x layout app component that we've just created. And let's just add some text to the page. So if we go over to that layouts component that we've just created, we can just create our basic document structure. The reason that we're doing this is we're going to need to inject in our JavaScript and CSS directly into here. Let's go ahead and add in our config for
02:16
our app name. And of course, you can change that later. And then inside of the body, let's just output the default slot in here. Okay, so we should now just see home with a nice document structure. Okay, so the way that we're going to do this is manually pull in view, and we're going to register components within our app.js file inside of here, which is pretty empty at the moment.
02:41
If we open up our package.json file, we have the ability to build assets with feet, but we also need to pull view in. So let's first of all just do an npm install on everything that's already in that package.json file, then we will go ahead and get view installed. So we'll do an npm install on view. And then we can set up a view application in here and bind it to a container
03:04
within our app. So let's go and pull in create app from view. And we'll go and create this app out. So this is just a plain old way to create a view app. So let's go and create this out with any options that we need in here. And then we need to mount this to a component within our page or an element within our page. So we'll just choose this as app. Now if we head over to our layouts file,
03:31
we can do that inside of here. So let's go and create out a container around this. And we will put the slot into here so we can render any content on normal pages. But then we'll give this an idea of app. So the goal here is to get something a component with view rendered out in here. Okay, so if we head back over to app.js, we have created the app, we've mounted it, but we
03:58
need to register a component. So let's figure out where we're going to do that. We can just put this inside of the JavaScript folder here. So let's create our new directory called components. And we'll create a example component out in here. So let's create out a view component, we'll call this scroller, that will be what we're building through the course. And let's get rid of our scoped styles.
04:19
And we'll just add some kind of reactivity in here just so we know this is working. So let's create out an increment button, which increments a value. And then once we know this is done, we're pretty confident we can just start building the view. So let's create out a ref in here to hold this count. So let's pull in ref from view up here. And we'll set that to zero. And then we'll do a V on click
04:42
and we'll call an increment method. And then we'll output the count inside of our template. Okay, so let's build out this increment method. And that is going to take the value of count. And of course, increment it, so we should be good. Now the goal here is to be able to get this and just put it directly within here. So we basically want to take our scroller and just output it on
05:07
the page. Now, obviously, at the moment, that is not going to work because we don't have that component registered. We're going to do that over in app j s. So first thing, let's go ahead and import this component. So let's import scroller. And we'll pull that in from our components directory. And then within view, we can register a global component. If you've worked with Laravel
05:26
for a while, this is the way that things used to work before we had the options of inertia and all that kind of stuff. So we've registered that scroller component, we've mounted this under app. And if we head over to here, still nothing is happening. That is just because we don't have our JavaScript pulled in over in our app.blade.php layout. So because we're compiling everything with
05:47
Vite, we can just use the Vite helper here. And we want to pass in the JavaScript file and also our compiled CSS as well, which we'll get to in a minute when we pull Tailwind in. Okay, so if we come over, you can see that we get a Vite manifest file not found. So let's go back over to our terminal and just make sure we're running npm run dev to compile all of our assets. And if we come
06:09
over now, we should nearly be good. We just need to put in a couple of additional dependencies. So we need this plugin view from Vite. Let's go ahead and do that now. So let's pull up another tab for that. Install this and just wait for that. Let's go ahead and give that a refresh. And yeah, it still doesn't work because we just need to configure this in our Vite.config.js file. So
06:29
let's go over to here and specify that we want to build with view in here. I have a little code snippet for this. I'm not going to waste your time and pull this out, but we basically just want to make sure we're compiling with view as well. And we're going to go and import view from that plugin and we can just call that view. Okay, let's go over and have a look. And yeah, so things are looking a
06:52
lot better. We head over to our console here. We just need to add an alias to the resolve section of our Vite file. And again, I'm just going to pull this snippet over. You can grab this from the GitHub repository if you're following along. Okay, if we head over, there we go. So a little bit annoying to have to settle this up, but I really don't want to pull in a full starter kit when we
07:12
don't need it. So now, as you can see, this works. So we now have view working on our app. Okay, let's go ahead and get Tailwind pulled in so we can style this up. Styling is incredibly important to this because when we look at our scroller a little bit later, we are going to need to make sure we're very specific about how we set this up so we don't run into any rendering issues. But you can choose
07:37
plain old CSS if you want to. Okay, let's go over to the framework guide for Laravel and get Tailwind pulled in. So let's go ahead and pull this into our project. And then we just want to go ahead and initialize our Tailwind config file over here. Great. Okay, next up, we just want to make sure that we specify which files are going to contain any styles. For us, we do want to grab these,
08:00
and we want these over in Tailwind config within this content section. We want to pull in blade files. We don't care about JavaScript files, and we do want to pull in view files as well. Next up, if we head over to app.css, which is also being compiled and output to our page, we just want to pull in the base Tailwind stuff. And then we're already running npm run dev,
08:22
and we've already included the Vite bundle on our page. So let's just go and exit out of this, rerun it, and we should have styling with Tailwind now. Okay, so a little bit annoying, but now that we have a good base to create a component, add this to the page, we're ready to start building this out.

Episode summary

In this episode, we start out by creating a fresh Laravel project from scratch—no starter kits, no authentication, just a plain installation. We'll call the project "million checkboxes" and set up MySQL as the database. After running migrations, we open the project in our code editor and clean up the default routes, making a simple HomeController and a corresponding view.

Next, we set up a basic Blade layout using components so we have a common structure across our pages. This is where we’ll inject our JavaScript and CSS. We then turn our attention to the JavaScript side, manually installing Vue (no inertia or Jetstream here) and setting up a classic app.js for our assets with Vite as the build tool. You’ll see how to register Vue components the old-school way: create a components directory, add a simple Scroller.vue component, and register it globally in app.js.

We run into a couple of tweaks needed for the setup, like ensuring Vite knows how to handle Vue, adding the appropriate plugins, and configuring aliases. It’s a bit manual, but it shows exactly what goes on under the hood if you’re not using scaffolding tools.

Once Vue is working, we add Tailwind CSS for styling. The episode walks through installing Tailwind, adjusting the config for Blade and Vue files, and making sure styles compile with Vite. By the end, everything is in place: a blank page with Vue and Tailwind ready, and our first reactive Vue component on the page. Now we’re all set up to build out the rest of the app in the following episodes!

Episode discussion

No comments, yet. Be the first!