In the previous article, I described the SPA modules and provided you with a foundation for developing such an application. Now let's dive deeper into this project and its capabilities.
https://github.com/Yurich84/laravel-vue3-spa
For the project, I chose Laravel and Vue3 with Composition API. Since the application is planned to be large, we will need a state manager system like Pinia. For authentication, we'll use Vue-Auth, Axios, and Sanctum.
For rapid development, the ElementPlus UI Kit was used. Also, there are libraries without which no large project can do:
- Lodash js utilities
- Day.js time manipulations
- FontAwesome 6 icons
- VueRouter
- VueI18n
Since the modules are entirely independent, I created a set of templates for each module file and a command that allows generating a fully functional CRUD ready to use.
By executing the command php artisan make:module {ModuleName}, all necessary files will appear, including the model and migrations for a fully functional CRUD operation. You just need to execute migrations php artisan migrate, and everything will work. Along with this, a file with functional tests is generated to cover this CRUD. Most likely, you will need to add additional fields, so before migrating, don't forget to add them to the model, migration, and also display them in vue.
The first version of the application used older technologies but was no less useful. Here it is: https://github.com/Yurich84/laravel-vue-spa-skeleton.
In the new project, I decided to change several libraries:
- Replaced Vuex with Pinia
- Moved to Vue3 Composition API
- Replaced moment.js with the lighter day.js
- Used Vite instead of webpack for the builder.
Initially, this groundwork was developed for my needs, but now I hope it will be useful for other users.
Top comments (0)