Looking for more information on how to do PHP the right way? Check out PHP: The Right Way

Medium.com:
Laravel and Vue JS: Advanced Frontend Webapp Architecture
Jul 17, 2015 @ 08:46:10

On Medium.com Russ Weas has posted a tutorial showing you how to get Laravel and Vue.js working together to create a well-structured, two-way application.

Do you use Laravel PHP and Vue JS? Do you wish there was a better way to structure your applications you build? This tutorial is just for you! In it, we set up simple two-way communication between the different components of your front-end app.

While he does provide the end result as a GitHub repository, he still walks through the full integration process to fill in the gaps. He starts with a brief introduction to a Vue.js application structure (based off of this video) and what parts need to be in play to follow along. From there he gets into the two-way communication aspect, showing how to create the bridge between the application, its views and components. He talks about some of the "missing pieces" of the current structure including an update to pass in a dependency injection "container" on the Vue side similar to how Laravel's IOC container works.

The remainder of the post is split into three parts, each with an update to the view layer (on the client side) to work with the new IOC structure:

  • using this.app in each view
  • setting data for a particular view from other views or the main app
  • calling view functions

He concludes the post with the full code for the two files they've been working with, showing everything working together: the HTML template (Laravel view) and the "app.js" Javascript for the Vue.js code.

tagged: laravel tutorial architecture vuejs frontend framework

Link: https://medium.com/laravel-news/advanced-front-end-setup-with-vue-js-laravel-e9fbd7e89fe2