Laravel 8, VueJS 3 & Tailwind CSS 3 SPA CRUD with VueRouter & VueX Store
ScriptMint
Posted on January 7, 2022
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
Posted on January 7, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024