Laravel Cursor Pagination
This episode is for members only

Sign up to access "Laravel Cursor Pagination" right now.

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

Episodes

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

Transcript

00:00
To keep things simple for this course, we're going to go ahead and use Laravel Vite, which is just
00:04
a Vite integration for Laravel. If you've not used Vite before, it's just a build tool for front-end frameworks and just makes it a little bit easier to get started.
00:13
So the first thing before we look at any of that is to go ahead and create a fresh Laravel project. So let's go ahead and say Laravel New, and let's call this Laravel Cursor Pagination.
00:23
And let's hit Enter on that and wait for that to install. We've already got a database set up here, of course, completely empty at the moment, and we'll go ahead and run our migrations when this finishes,
00:32
and it's done. So let's go ahead and open this project up, run our migrations, and we can get Vue installed. OK, there's our project.
00:38
Let's go ahead and open up our EMV file, and I'm just going to change the database driver over to Postgres, which is what I'm using. Doesn't matter if you're using MySQL.
00:48
The database name here is pre-filled for us, and I'm just going to go ahead and switch over my username. So with that done, we can go ahead and run php art and migrate, and just fill up our database
00:59
with all of the default tables we have. OK, so let's go and install Laravel Vite. Now, the first thing that we want to do is just head over to the GitHub page for this,
01:09
come down, and just do the Composer Require on Laravel Vite. So let's go ahead and open up just a new tab in here, and let's run that.
01:19
And now we're going to go ahead and use the preset. So let's go back over to the Laravel Vite homepage and open up the preset GitHub repo, and go ahead and pull this in.
01:30
That's going to do a few things. You can read the docs, or we have a specific course on this if you like it and you want to go ahead and continue. So let's go ahead and run npx apply Laravel Vite.
01:41
That will just do a few things and just chop and change around our application. So as an example, if we open up Roots and Web, this now returns this app view.
01:50
If we go over to Resources under Views, you can see that we've got this very, very plain page here with this Vite directive. That's going to go ahead and inject a load of scripts, which
02:00
is now going to allow Vue to run directly within our Laravel app. And we have this app.vue page here, which we'll see in just a moment.
02:08
So we're going to go ahead and for the course, just use php artisan serve. So let's go ahead and serve our app first. Now, that's not going to work at the moment.
02:17
We're going to need to do an npm install and then run npm run dev. So let's do both of them commands together, wait for that to finish, and head over to the browser.
02:27
OK, great. That's done. Let's head over to our app here, give that a refresh, and there we go.
02:32
We have a fresh Vue app directly within Laravel, which is perfect. OK, so now that we've got both of them things out of the way, let's go ahead and pull Tailwind in just
02:42
so we have something to style. You don't have to do this, of course. Let's head over to the docs, go down to the framework guide section, and come over to Vite because, of course,
02:51
we're using Vite. So we've already created a Vite project, so we don't need to do that here. We do need to pull in a few dependencies.
02:58
So let's do that first of all. We're just going to close this off while we do it. And let's go ahead and generate our Tailwind CSS config file as well.
03:08
So the next thing we need to do is open this up and apply the content in here, specifically this one. That's going to allow Tailwind to see what we want to use this with.
03:17
Let's open up Tailwind.config.js. And under Content, let's paste this in. The only difference is we have a different location for our files.
03:25
This is Resources, Views, and then anything inside of here. So we'll change this to Resources and Views, and we should be good. So next step is to go ahead and just take out
03:37
all of the imports here and put them into our CSS file, which we can do very easily. And we're pretty much good to go. We just want to go ahead and import that CSS file,
03:48
and we should see everything. So if we just go over to the main.typescript file here, we can go ahead and import this file. So let's use at for our root alias, CSS, and app.css.
04:01
Great. OK, so now that we've done that, let's go ahead and rerun npm run dev. And let's head over to the browser,
04:07
and we should see Tailwind has been installed. And we know it is because everything looks a little messed up here, which is absolutely fine because we're going to be getting rid
04:16
of everything inside of here. So let's do that now. I'm also not going to be writing TypeScript here just to keep things simple.
04:22
So let's get rid of everything in there. We'll get rid of all of this styling, and we'll just go ahead and just create out a simple hello. And let's add a Tailwind-specific class to this
04:32
just so we know it's working, font-bold. And there we go. You can see that that is now working. So we've got a Laravel, a view, technically
04:41
Vite project setup, and we've got Tailwind in there for a little bit of styling just to keep things looking nice. Let's head over to the next episode and take a look at getting our API endpoint set up.

Episode summary

In this episode, we walk through setting up a brand new Laravel project with Vue and Tailwind CSS, using Vite to power the frontend build process. We start by creating a fresh Laravel app (ours is called "Laravel Cursor Pagination") and get the initial database setup ready—switching to Postgres in the example, but you can use MySQL or whatever you prefer.

We then install the Laravel Vite package and use its preset to quickly set up Vue and Vite inside our project. After running migrations, we explore the updated file structure and see what bits have changed, with the new Vue entry point ready to go.

With the backend ready, we jump into getting the frontend tooling sorted. A quick npm install and npm run dev later, we have a working Vue setup inside Laravel. To make things look a bit nicer, we bring in Tailwind CSS (totally optional, but handy for styling), tweak some config, and ensure it's all wired up by applying some bold styling to check it's working.

Now, with Laravel, Vue, Vite, and Tailwind all set up and talking to each other, you're ready to start building out the actual app! In the next episode, we'll move on to setting up an API endpoint.

Episode discussion

No comments, yet. Be the first!