This is a boilerplate project for applications using a Laravel Backend with a Single Page Application using VueJS and Vuetify. I decided to make this boilerplate after wrestling with this setup for some time.
This project assumes the user has a base knowledge of Laravel and VueJS, documentation can be found here:
The styling for the frontend is done using Vuetify, exploring this documentation will help you understand the components and tags used in the frontend.
Assuming you have PHP, MySQL, and a Web Server installed (or you are using a Vagrant machine like Laravel's Homestead) to get this project running simply:
git clone https://github.com/aturingmachine/laravel-vue-spa-boilerplate.git <directory name>
cd <directory name>
If you are using a VM the following commands can be executed from the proper directory in the VM
Then:
Make our own .env:
cp .env.example .env
Install all our dependencies:
npm install
composer install
Generate a Key for the application:
php artisan key:generate
Build the Javascript
npm run dev This should be done after any changes to the Vue application
Then navigate to the url set in your Homestead.yaml or wherever you may have it living to see the Vue Application.
/resources/
/assets/js/ Here lives all of your JavaScript for the Front End of the application
/components/ Here is where we will place new Vue Components, an example is already there for you.
/config/ Any config .js files you need, a base Axios config is here already. You can create more Axios configs simply by following the same conventions laid out in this file.
/router/ The index.js of this directory is used to set all routes and rules for the vue-router we use.
/stylus/ The Vuetify styling is in here, we need not worry about it.
/app.js This is the main driver of the frontend application, unless you are adding new node modules to it, this should work out of the box.
/App.vue This is the main Vue component. It is a toolbar, nav-drawer, and footer with a router view in the middle where other components are displayed.
/views/app.blade.php This is a simple file that has our Vue application dropped into it.
The backend of this project follows the same conventions of Laravel. I suggest looking into their documentation and familiarizing yourself with the php artisan commands. They are used to create everything you need including Models, Migrations, and Controllers.
Some Dependencies in this application that may differ from a base VueJS install or Laravel install include:
- NPM
- vue-cookie To help manipulate cookies on the frontend
- vue-router To route views with the SPA
- Composer
- barrvdh/cors To enable CORS on the server side if needed (This is on by default, to disable it just follow the documentation)
All contributions are appreciated, simply follow the guidelines laid out in the guide.