Best laravel framework open-source packages.

Advanced crud vue

An advance crud example with vue and laravel
Updated 2 years ago

An Advanced SPA CRUD Example

With Vue, Vuex, VueRouter, Larevel, Axios, CORS, Bootstrap, Animate

  1. CRUD with a Table and Form
  2. Colum Table are Sorteable
  3. Choose Field to Display in Table
  4. Search Box and Filter Record Status
  5. Use Vuex for State with Modules
  6. Top Popup Messages
  7. Form's Fields Validations on Client
  8. Handle Languagues
  9. Import and Export functionalities
  10. Use Bootstrap 3 and Animate
  11. CORS Implementation
  12. Laravel API 5.4 for CRUD Operations
  13. Integrate Gravatar Service
  14. Location Searcheable Field
  15. Language Traslations
  16. Laravel Passport

Some Components created from scratch

  1. Pagination Component
  2. Table Component
    • Column Sort
    • Choose a Field to Display (store in LocalStorage)
    • Pagination Per Page
  3. Popup Messaging Component
  4. Language Component
  5. Topbar Component
  6. Sidebar Component
  7. Avatar Component based on Gravatar Service
  8. Location Component
  9. Language Traslations Component

Application Architecture

  • The client is a VueJS Sigle Page Application
  • The server is a Laravel API
  • The Comunication uses CORS
  • The Database is a MySQL Database

To use/play with application you need to runs npm run dev in the client directory and php artisan in the server directory

TODO

  1. Allow to add an image as avatar if the email does not exit in gravatar service
  2. Test spec's
  3. Upgrate to Laravel 5.5 or lastest releases
  4. Upgrate to Vue 2.5 or last releases or lastest releases
  5. Review Security

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.