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 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
- Tailwind CSS
- Tailwind Typography
- Vue Loading Overlay
- Vue Toastification
- Vue Sweetalert2
- Laravel Mix
- Hero & Fontawesome Icon
Modern browser only
Did you find this article valuable?
Support ScriptMint by becoming a sponsor. Any amount is appreciated!