This is a groundwork for a large modular SPA, that utilises Laravel, Vue, ElementPlus.

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

The main goals of the project are:

• to avoid high 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

• Back-End: Laravel 11
• Front-End: Vue3 Composition Api + VueRouter + Pinia + VueI18n
• Login using Vue-Auth, Axios and Sanctum.
• The api routes, are separate for each module, in Modules/{ModuleName}/routes_api.php
• ElementPlus UI Kit
• Lodash js utilities
• Day.js time manipulations
• FontAwesome 6 icons

Install

• git clone https://github.com/Yurich84/laravel-vue3-spa.git
• cd /laravel-vue3-spa
• 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 dev for hot reloading
• php artisan serve and go localhost: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
│
├── {moduleName}Api.js
│
├── {moduleName}Store.js
│
├── components/
    ├── {ModuleName}List.vue
    ├── {ModuleName}View.vue
    └── {ModuleName}Form.vue

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