PhpDev.App
Yurich84/laravel-vue-spa-skeleton

Yurich84/laravel-vue-spa-skeleton

Stars: 138

Forks: 50

Pull Requests: 45

Issues: 8

Watchers: 13

Last Updated: 2023-03-14 18:17:21

#laravel #vue #spa #element-ui #spa-skeleton #generator #foundation #modular #crud-generator #frontend #elementui #vuex #php #vuejs #crud

SPA modular Skeleton (Laravel + Vue + ElementUI) with CRUD generator

License: MIT License

Languages: PHP, Vue, Shell, Blade

Vue logo

I am currently working on a new Laravel Vue 3 project with Composition Api, Vite and Pinia as store manager.

MIT Licensed

This is a basement for a large modular SPA, that utilises Laravel, Vue, ElementUI.

CRUD generator is integrated in project creates standalone modules on the frontend and backend.

The main goals of the project are:

  • to avoid hard cohesion between modules
  • to form the basis for writing clean code
  • to be easy to expand
  • to avoid code duplication
  • to reduce the start time of the project
  • to reduce the time of project support and code navigation
  • to be understandable for an inexperienced programmer

Extensions

Install

  • git clone https://github.com/Yurich84/laravel-vue-spa-skeleton.git
  • cd laravel-vue-spa-skeleton
  • composer install
  • cp .env.example .env - copy .env file
  • set your DB credentials in .env
  • php artisan key:generate
  • php artisan migrate
  • yarn install

Testing

Unit Testing

php artisan test

Usage

  • npm run watch or npm run hot - for hot reloading
  • php artisan serve and go 127.0.0.1:8000
  • Create new user and login.

Creating module

You can easily create module with CRUD functionality.

php artisan make:module {ModuleName}

This will create:

  • migration database/migrations/000_00_00_000000_create_{ModuleName}_table.php

  • model app/Models/{ModuleName}.php

  • factory database/factories/{ModuleName}Factory.php

  • tests tests/Feature/{ModuleName}Test.php

  • backend module app/Modules/{ModuleName}/

{ModuleName}/
│
├── routes_api.php
│
├── Controllers/
│   └── {ModuleName}Controller.php
│
├── Requests/
│   └── {ModuleName}Request.php
│
└── Resources/
    └── {ModuleName}Resource.php
  • frontend module resources/js/modules/{moduleName}/
{moduleName}/
│
├── routes.js
│
├── api/
│   └── index.js
│
├── components/
│   ├── {ModuleName}List.vue
│   ├── {ModuleName}View.vue
│   └── {ModuleName}Form.vue
│
└── store/
    ├── store.js
    ├── types.js
    └── actions.js

After creating module, you can edit model and migration by adding fields you need. Also you can add this fields into view. Don't forget run php artisan migrate.

Every module loads dynamically.

Video

OPEN ISSUES

See all

RELEASES

See all