Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

layer7's avatar
Level 24

Starter application (Vue.js, Laravel, Dingo, JWT)

Vue.js Starter Project


Hi,

For my own projects and for you all to try out, I've created 2 new repo's on Github that should serve as a nice example on what a single page application made in Vue.js could look like when using a backend API.

1. Frontend

  • Vue.js 0.12.15
  • vue-router
  • vue-resource
  • vueify
  • envify to accomodate builds in different environments
  • Laravel Elixir for Gulp magic
  • Bootstrap 3.3.5 styling
  • Sass custom styles (mostly Laravel Spark styles)

The repo on Github


2. Backend

  • Laravel 5.1
  • SQlite or any other DB backend you prefer. SQLite is the default to make testing this out easier
  • Dingo API component for Laravel
  • JWT Authentication middleware
  • Sample REST api for Dogs (woof woof) - CRUD style

The repo on Github

The backend is completely optional, but if you would like to test the entire starter app including authentication, it will be easier to first try and install this instead of immediately diving in and creating your own API. That's the sole reason for the Laravel API to exist.

3. Installation and requirements

Instructions for installation are kept as simple as possible If you have the basic requirements you can be up and running in 2 minutes.

3.1 Frontend:

node.js with npm

3.2 Backend:

PHP and Composer.


4. License

Both projects are under the MIT license. Bend, break and profit at will.


5. Disclaimer

Both repositories are still very much a work in progress, but it should be a good starting point for anyone trying to get set up as quickly as possible. Things like refreshing the JWT every once in a while are not implemented, so you will be logged out after an hour (default setting) and you will need to re-authenticate.


6. Contributing

Pull requests are encouraged and welcomed.

Cheers, K!

0 likes
15 replies
Bloomanity's avatar

Do you know how to test POST requests with PHPUnit to the Api?

joedawson's avatar

Been referencing your repos most of last night, some super helpful stuff in there. Thanks!

1 like
Nublust's avatar

If you were to actually have a setup like this, how would you host it? Would the front and back need to be separate, different servers etc.?

layer7's avatar
Level 24

No, you could merge the 2 projects. I just split them up to make a clear separation of front and backend for those only interested in one or the other.

/K

2 likes
ciurinho's avatar

I'm currently watching the Vue JS series and I would really love to install this repository and understand how it works. However, I've never used a github repository before and I'm not sure I understand the installation instructions... I'm using laravel 5.2 with WAMP, so I cloned the project in my www folder and tried to run the commands in prerequisites (https://github.com/layer7be/vue-starter-laravel-api). This is what I got:


c:\wamp\www\vue-starter-laravel-api>composer install
> #php artisan clear-compiled
'#php' is not recognized as an internal or external command,
operable program or batch file.
Script #php artisan clear-compiled handling the pre-update-cmd event returned wi
th an error


  [RuntimeException]
  Error Output: '#php' is not recognized as an internal or external command,
  operable program or batch file.


install [--prefer-source] [--prefer-dist] [--dry-run] [--dev] [--no-dev] [--no-p
lugins] [--no-custom-installers] [--no-autoloader] [--no-scripts] [--no-progress
] [-v|vv|vvv|--verbose] [-o|--optimize-autoloader] [-a|--classmap-authoritative]
 [--ignore-platform-reqs] [--] [<packages>]...


c:\wamp\www\vue-starter-laravel-api>php artisan migrate

Warning: require(C:\wamp\www\vue-starter-laravel-api\bootstrap/../vendor/autoloa
d.php): failed to open stream: No such file or directory in C:\wamp\www\vue-star
ter-laravel-api\bootstrap\autoload.php on line 17

Fatal error: require(): Failed opening required 'C:\wamp\www\vue-starter-laravel
-api\bootstrap/../vendor/autoload.php' (include_path='.;C:\php\pear') in C:\wamp
\www\vue-starter-laravel-api\bootstrap\autoload.php on line 17

Sorry to bother you with such a silly question, but I have no idea how to proceed. Could anyone please explain me how this should be done?

omniware's avatar

@ciurinho I am sure by now you would have figured it all out, last night when I was trying to install this I got the same error, How did you solve the issue?

ciurinho's avatar

@omniware Hope you managed to sort it out, because I didn't :)) I just had to use good old jquery and ajax for my project... Would be curious to know what the solution is, I'd like to give it another try.

briangreenhill's avatar

@ciurinho @owalerys

"pre-update-cmd": [
    "#php artisan clear-compiled"
],

The issue with that code is the "#" as you can see from the error message posted:

[RuntimeException]
  Error Output: '#php' is not recognized as an internal or external command,
  operable program or batch file

The line should read as follows but doesn't need to be commented out:

"pre-update-cmd": [
    "php artisan clear-compiled"
 ],

I hope that helps.

Please or to participate in this conversation.