Twice this week I've been tasked with setting up new applications using Laravel with VueJS and Tailwind CSS. For the most part this is a pretty straight-forward process, but I kept finding myself jumping back and forth between the various docs pages and decided that maybe I should jot down a simple step-by-step guide so I can save myself a few minutes next time.
### For my purposes here I'm assuming that you already have composer and node installed and working properly. ###
The first thing we need to do, obviously, is install laravel.
composer create-project --prefer-dist laravel/laravel sitename
Next, cd into the new directory and require the tailwindcss preset package.
cd sitename composer require laravel-frontend-presets/tailwindcss --dev
This gives us the laravel/ui package (which we need to install vue) along with the new command to install the tailwind presets.
php artisan ui vue php artisan ui tailwindcss --auth
Notice that we're calling tailwindcss with the
--auth flag. This adds the Auth frontend presets, restyled using Tailwind. If you don't want these you can safely leave that flag off.
Make sure to install and build our npm packages...
npm install && npm run dev
...and we're ready to create our database.
Assuming you're using a local db...
mysql -u dbuser -pdbpass -e "create database mydb"
We need to update our
.env file with the proper database credentials. If you're using a local database, you only need to update 3 lines:
DB_DATABASE=mydb DB_USERNAME=dbuser DB_PASSWORD=dbpass
...and run the migrations to create the tables in your database.
php artisan migrate
This next bit is completely optional, but I always like to seed an initial user to speed things along.
and uncomment the line
Next we need to create the users seeder...
php artisan make:seeder UsersTableSeeder
Now that we have the seeder itself, we need to open it at
database/seeds/UsersTableSeeder.php and add the following lines inside the
DB::table('users')->insert([ 'name' => 'Fred Flintstone', 'email' => 'firstname.lastname@example.org', 'password' => Hash::make('Dino123') ]);
Run your seeds with
php artisan db:seed and you're all set.
If you are (as a good programmer should be) somewhat lazy, you may notice that this process just cries out to be automated.
To that end, I've written a simple bash script that does just that.
It's nothing fancy, but it works.