Laravel 8, VueJS 3 & Tailwind CSS 3 SPA CRUD with VueRouter & VueX Store

Are you looking for a SPA CRUD built with latest version of Laravel, VueJS & Tailwind? I have spent lot of my time searching for a sample CRUD but didn't find any promising result. After spending few weeks, I was able to build the same & today I decided to make this repository public.

Vutal is Laravel 8, VueJS 3, Tailwind 3 SPA (Single Page Application) CRUD example for intermediate & advanced user. If you are a begineer, I recommend you to spend some time figuring out basic concept of Laravel & VueJS.

Github Repository: github.com/scriptmint-solution/laravel-vue3-..

Live Demo: vutal.scriptmint.com

Interested in Full Featured & Advanced Admin Panel built with Laravel 8, Vue.js 3 & Tailwind CSS 3? Check Vana Admin at https://ui.scriptmint.com

Vutal includes sample "project" module demonstrating a complete CRUD operation. Below are the operations included in this repository:

• Listing all Projects
• Create a Project
• Edit a Project
• Delete a Project
• Alert before Deleting any Project
• Form Validation
• Loading Indicator

Vutal implements Laravel Requests, API Resource, Factory & Seeder to perform backend operations. The controller uses services for various actions to make code neat & clean.

Vutal is written with the composition API and script setup syntax to make your code clean. Also, it loads the route components dynamically using VueRouter. It uses VueX Store to perform API operations. Vutal also offers following basic components:

• Base Input
• Base Textarea
• Base Button
• Dropdown Menu
• Dropdown Item
• Base Card

To run the code, follow these steps:

git clone https://github.com/scriptmint-solution/laravel-vue3-tailwind-crud.git vutal
cd vutal
composer install
php artisan migrate // Make sure you update database details in .env
npm install
npm run dev

To run tests:

php artisan test

Vutal uses following open source packages:

• Vue 3
• Vue Router
• Vuex
• Tailwind CSS
• Tailwind Typography
• Axios
• Vue Loading Overlay
• Vue Toastification
• Vue Sweetalert2
• Lodash
• Laravel Mix
• Hero & Fontawesome Icon

Browser Support

Modern browser only