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

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

• BackEnd: Laravel 8
• FrontEnd: Vue + VueRouter + Vuex + VueI18n
• Login using JWT with Vue-Auth, Axios and Sanctum.
• The api routes, are separate for each module, in Modules/{ModuleName}/routes_api.php
• ElementUI UI Kit
• Lodash js utilities
• Moment time manipulations
• FontAwesome 5 icons

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