Laravel 8 with Fortify, Vue 2 and Tailwind CSS

I want to make a project with the newest Laravel 8 for the public web and having Vue JS SPA for the private web app. I found out it's quite tricky to setup the authentication part since Laravel explicitly instruct you to choose between Breeze and Jetstream starter kits.

The closest setup they have is Laravel Jetstream with Inertia and Vue JS but it doesn't really suit my needs, and I don't need the extras.

To keep it slim down and simple, I decided to make my own starter template. Luckily there's some helpful tutorials out there, notably by Laravel Daily / Povilas Korop https://dev.to/povilaskorop in his YouTube video:

In this video he explains everything you need to know about the Laravel situation and the decision choosing Fortify.

After setting up Fortify, I continue setting up Vue, Vuex and Vue Router with the help from this article https://medium.com/@martinsOnuoha/set-up-vue-vuex-vue-router-sass-in-laravel-8-590c768e8387. Then I did the Tailwind setup with the help from their documentation https://tailwindcss.com/docs/guides/laravel.

I spent about 4 hours on this setup. Let me know if anything doesn't run as expected or if you need any help. Hope you find this helpful.

Here's the final result:

laurensiusadi / laravel-fortify-vue-tailwind-template

Basic setup Laravel 8 + Fortify + Tailwind + Vue 2

Laravel Public + Vue Private SPA

Basic setup Laravel 8 + Fortify + Tailwind + Vue 2

The idea is to have basic public facing website handled by Laravel, so it's going to be quick and doesn't need to setup server rendering for Vue.

Features

• All essentials auth pages included
• Email confirmation sequence
• Private web app SPA Vue JS

Notes

Private route URL is /app, defined in:

• app\Providers\RouteServiceProvider.php
• resources\js\router.js
• routes\web.php

How To Run Project

1. Copy env.example and rename to .env
2. Fill in database and email
3. Install all dependencies composer install and npm install
4. Run php artisan migrate
5. Run php artisan serve and in another terminal npm run watch

How To Disable Email Confirmation

1. routes\web.php: Remove all routes under Email Verification, and remove middleware verified
2. config\fortify.php: Remove Features::emailVerification()
3. app\Models\User.php: Remove implements MustVerifyEmail

View on GitHub

Note, I haven't make anything on the API side, how the Vue will interact with Laravel API, but you can use window.axios in the Vue component.