Laravel Vue 3 project with Composition Api, Vite and Pinia as store manager.
I am currently working on a newThis 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
ornpm run hot
- for hot reloadingphp 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.