Laravel 8 with Fortify, Vue 2 and Tailwind CSS

Laurensius Adi — Mon, 01 Feb 2021 12:39:50 +0000

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

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

How To Disable Email Confirmation

routes\web.php: Remove all routes under Email Verification, and remove middleware verified
config\fortify.php: Remove Features::emailVerification()
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.

DEV Community: Laurensius Adi

Laravel 8 with Fortify, Vue 2 and Tailwind CSS

laurensiusadi / laravel-fortify-vue-tailwind-template

Basic setup Laravel 8 + Fortify + Tailwind + Vue 2

Laravel Public + Vue Private SPA

Features

Notes

How To Run Project

How To Disable Email Confirmation