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.