Setting up a Laravel project with Vue and Tailwind
Published - 2020-04-10

Alright.

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.

First, open
database/seeds/DatabaseSeeder.php
and uncomment the line
$this->call(UsersTableSeeder::class);.

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 run() method.


DB::table('users')->insert([
    'name' => 'Fred Flintstone',
    'email' => 'fred@bedrock.com',
    '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.

Cheers.