https://github.com/aturingmachine/laravel-vue-spa-boilerplate
A boilerplate project for developing a SPA with Laravel and Vuetify
https://github.com/aturingmachine/laravel-vue-spa-boilerplate
full-stack laravel laravel-boilerplate php quickstart single-page-app single-page-applications vuejs2 vuetify
Last synced: 8 months ago
JSON representation
A boilerplate project for developing a SPA with Laravel and Vuetify
- Host: GitHub
- URL: https://github.com/aturingmachine/laravel-vue-spa-boilerplate
- Owner: aturingmachine
- License: mit
- Created: 2017-10-05T16:06:04.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-26T16:38:14.000Z (about 8 years ago)
- Last Synced: 2025-03-30T07:12:22.079Z (9 months ago)
- Topics: full-stack, laravel, laravel-boilerplate, php, quickstart, single-page-app, single-page-applications, vuejs2, vuetify
- Language: PHP
- Size: 618 KB
- Stars: 8
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Laravel With Vue/Vueitfy Single Page Application Boilerplate
## About
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.
### Assumptions
This project assumes the user has a base knowledge of Laravel and VueJS, documentation can be found here:
* [Laravel](https://laravel.com/)
* [VueJS](https://vuejs.org/)
The styling for the frontend is done using [Vuetify](https://vuetifyjs.com/), exploring this documentation will help you understand the components and tags used in the frontend.
## Installation
Assuming you have PHP, MySQL, and a Web Server installed (or you are using a Vagrant machine like Laravel's [Homestead](https://laravel.com/docs/5.5/homestead)) to get this project running simply:
`git clone https://github.com/aturingmachine/laravel-vue-spa-boilerplate.git `
`cd `
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.
## Project Structure
### Frontend
`/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](https://github.com/axios/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.
### Backend
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**.
### Dependencies
Some Dependencies in this application that may differ from a base VueJS install or Laravel install include:
1. NPM
* [vue-cookie](https://github.com/alfhen/vue-cookie) To help manipulate cookies on the frontend
* [vue-router](https://github.com/vuejs/vue-router) To route views with the SPA
2. Composer
* [barrvdh/cors](https://github.com/barryvdh/laravel-cors) To enable CORS on the server side if needed (This is on by default, to disable it just follow the documentation)
### Contributing
All contributions are appreciated, simply follow the guidelines laid out in the [guide](https://github.com/aturingmachine/laravel-vue-spa-boilerplate/blob/master/CONTRIBUTING.md).