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

Laravel News:
Testing Vue components with Laravel Dusk
Mar 14, 2018 @ 13:09:52

On the Laravel News site there's a new post showing how you can test Vue.js applications with Laravel Dusk, a testing tool created by the Laravel project to make it easier to create integration tests that are run with a ChromeDriver.

Adding tests to a project is always beneficial for different aspects, but choosing the right strategy could be a struggle for many developers.

The problem multiplies itself when you are using different tools or frameworks, and although “having as many tests as you can” sounds like a good idea, at least in theory, in practice this can be very different. The following is an interesting article from the Twitter team about their thoughts on Feature Testing.

Taylor Otwell shared Twitter’s article on his Bi-Weekly Laravel Tips newsletter, subscribe if you haven’t done yet. Let’s build a simple to-do list using Vue.js and Laravel to illustrate how to add Browser testing using Laravel dusk.

They starts with the controller code to create "tasks" functionality for read/write/update/delete that includes request validation, model binding and JSON responses. It then includes the code to create the first "task" tests for each of the CRUD operations. With those basics in place, the tutorial then gets into the Vue.js side, showing how to test a simple TasksComponent.vue file and its functionality.

tagged: laravel dusk testing crud task vuejs tutorial

Link: https://laravel-news.com/testing-vue-components-with-laravel-dusk

CloudWays Blog:
Getting Started With Vue.Js In Symfony
Feb 26, 2018 @ 12:57:04

On the CloudWays blog there's a tutorial posted that walks you through the beginning steps to create a Symfony + Vue.js application with a Symfony 4 application.

As a PHP developer who uses Symfony regularly, I have had a hard time choosing from the numerous JavaScript frontend frameworks available in the market. I had to pick one of the top-rated JavaScript frameworks including Angular, React, Vue and Aurelia.

[...] In this article, I will go through the process of enabling and configuring Vue.js within Symfony applications. Part of this process is covered in the official Symfony documentation.

The tutorial starts by answering the "Why Vue?" question and why frontends are important. He then gets into some of the prerequisites and the steps to create the application:

  • creating the Symfony 4 application via Composer
  • adding a default controller and route
  • making a default Vue.js template via Twig
  • pulling in Vue.js and its requirements via yarn
  • creating the Vue Component

The end result is a simple page that shows the component in a Bootstrap-themed page.

tagged: vuejs symfony tutorial introduction application template javascript

Link: https://www.cloudways.com/blog/symfony-vuejs-app/

CloudWays Blog:
Create A Laravel Vue Single Page App In Under An Hour
Feb 23, 2018 @ 10:15:51

The CloudWays blog has a new tutorial posted that walks you through the process of getting a Laravel+Vue.js single page application running in less than an hour. The instructions for the server portion cover the use of CloudWays' service but they could be applied to any number of other hosting providers.

Laravel has become the most popular choice for developing PHP projects. One important reason for this popularity is the built in support for Vue.js, a very fast growing JavaScript library for developing impressive front-ends.

This combination results is fast, secure and very impressive applications that need minimum time to go from ideation to final code review. The support for Vue.js means that Laravel developers could use Vue components easily within their apps without wasting time in writing integrations for the components. To demonstrate the support, I decided to create a single page application in Laravel with a Vue.js powered frontend.

They start off with a list of prerequisites (software to have installed) and then move on to setting up the database and creating a "tasks" migration. The tutorial then covers building out the authentication handling (via artisan) and the creation of the "task" model and controller. With all of that in place it starts in on the backend functionality to read, create, update and delete the tasks. Next it moves to the frontend showing how to create the Vue.js components required and integrating the Javascript into the view to link it to the backend for managing the tasks.

tagged: tutorial laravel singlepage application spa vuejs task

Link: https://www.cloudways.com/blog/laravel-vue-single-page-app/

Laravel News:
Building a Vue SPA with Laravel Part 3
Feb 19, 2018 @ 11:22:08

The Laravel News site is back with the latest part in their series covering the combination of Laravel and Vue.js to create a basic application. In this latest part (part 3) they continue from the previous tutorials and show how to pull in real data versus the fake data from before.

We will continue building our Vue SPA with Laravel by showing you how to load asynchronous data before the vue-router enters a route.

We left off in Building a Vue SPA With Laravel Part 2 finishing a UsersIndex Vue component which loads users from an API asynchronously. We skimped on building a real API backed by the database and opted for fake data in the API response from Laravel’s factory() method.

If you haven’t read Part 1 and Part 2 of building a Vue SPA with Laravel, I suggest you start with those posts first and then come back. I’ll be waiting for you!

In this tutorial, we are also going to swap out our fake /users endpoint with a real one powered by a database.

They get immediately back to the code, creating a "user" table seeder to generate randomized data and adding it for execution. Next, they switch to the database side, creating the MySQL database for the user data and running the seeding to create the users. The tutorial then shows the creation of the Users controller and what the resulting JSON will look like when pulling all users. Finally, it moves out to the client side and shows how to pull in the data pre-load and push the user details into a template to be rendered.

tagged: vuejs spa singlepage application part3 series tutorial laravel

Link: https://laravel-news.com/building-vue-spa-laravel-part-3

Laravel News:
Building a Vue SPA with Laravel Part 2
Jan 30, 2018 @ 12:13:28

The Laravel News site has posted the second part of their tutorial covering the creation of a Laravel-based single page application with Vue.js. This latest tutorial picks up from part one and covers data loading and error handling.

In this tutorial, we continue Building a Vue single-page application (SPA) with Laravel by learning how to load async data from a Laravel API endpoint inside a Vue component. We will also look at error handling when an API response returns an error and how to respond in the interface.

[...] To keep the server-side data simple, our API will use fake data. In Part 3, we will convert the API to a controller with test data coming from a database.

The tutorial starts with the definition of a "users" API route and an update to the API route configuration to map the routes to the correct controllers. Next comes the frontend functionality to load in the user data with the addition of the "users" route to the current Vue.Router instance. The UsersIndex component is then added with the template and functionality to request the data from the backend API. Some final changes are made to the route handling and error handling is added for when the data loading has issues, relaying an error message back to the user.

tagged: laravel tutorial singlepageapp vuejs series part2 api backend users

Link: https://laravel-news.com/building-vue-spa-laravel-part-2

Laravel News:
Building a Vue SPA with Laravel
Jan 04, 2018 @ 10:23:08

On the Laravel News site there's a new tutorial posted showing you how to create a Vue.js single page application with Laravel for when you have API-driven applications.

Building a Vue single page application (SPA) with Laravel is a beautiful combination for building clean API-driven applications. In this tutorial, we show you how to get up and running with Vue router and a Laravel backend for building a SPA. We will focus on the wiring up all the pieces needed, and then in a follow-up tutorial, we will further demonstrate using Laravel as the API layer.

They walk you through the creation of a simple SPA that will render the initial content and allow for the browsing back and forth between content without a page reload. The tutorial helps you get all required libraries installed and includes the code to define the Vue router and two routes. The contents of the .vue files are also included as well as the server-side code to power the application.

tagged: laravel vuejs tutorial singlepage application spa introduction

Link: https://laravel-news.com/using-vue-router-laravel

Jeff Madsen:
Using Laravel Translation Strings in Vue.js
Dec 28, 2017 @ 09:51:02

Jeff Madsen has a new post to his site showing you how integrate Laravel's translations strings with a Vue.js frontend making it simpler to maintain only one source for the translation of content in your application.

One issue you will face if you need to make a multi-lingual site is how to keep your translations organized for both your back-end framework and your javascript components. I’m going to demonstrate the basic technique for this, using Laravel and Vue.js for my example.

While his examples make use of Laravel and Vue.js, the approach is agnostic of most tools and could be modified to integrate with other technologies pretty easily. He builds a system where the translations are kept in PHP files which are converted into something Vue can read and use. He starts with the backend, showing how to use Laravel's localization functionality to set up the files and shift between languages. He then makes use of the lang.js library to pull the contents of these files into Vue and adds in a bit of code to push those values into components.

tagged: vuejs language translation tutorial string laravel

Link: https://medium.com/@codebyjeff/using-laravel-translation-strings-in-vue-js-e2e35b7aafca

Implementing Laravel’s Authorization on the Front-End
Sep 27, 2017 @ 10:15:56

On the Pineco.de site there's a tutorial posted showing you how to implement the Laravel auth system on the frontend re-using the same logic in a single-page Vue.js application as you would on the backend.

If you are using Laravel, probably you are familiar with its ACL. You can easily restrict user’s access by creating policies and binding them to the specific models. It works perfectly on the back-end, but what can we do if our app is something like an SPA?

The post starts with a brief overview of the Laravel ACL handling as it relates to users and policies about what they can do or access. The frontend setup then makes use of a "cheap copy" of the Laravel "gate" handling via a Javascript-based request. They walk you through the preparation work you'll need and the creation of a gate class to define the current policies for CRUD methods. The main "Gate" class is then defined, setting up the before, allow and deny action methods. Finally these pieces are integrated into the Vue.js application with an example of either showing or hiding the "Edit" link based on the user permissions.

tagged: laravel authentication gate frontend vuejs tutorial gate logic javascript

Link: https://pineco.de/implementing-laravels-authorization-front-end/

Delicious Brains:
Announcing serializededitor.com: A Visual Editor for PHP Serialized Data
Jun 28, 2017 @ 09:22:23

On the Delicious Brains site there's a new post from Gilbert Pellegram announcing serializededitor.com, an editor specifically designed to help visually edit serialized PHP data.

I recently built a command line daemon in PHP to emulate AWS SQSD for the purposes of testing in Mergebot. As it turns out, one of the benefits of building a large, complex product like Mergebot is that there are pieces of the system that we need to build for the project that might be of use to other developers.

Today, we’re launching that system piece, a free online visual editor for PHP serialized data as serializededitor.com.

In this article, I’ll explain how and why we built this “side” project and how I overcame some of the challenges I faced when building this project.

He starts off with the problem they were trying to solve when creating the editor, mostly centered around determining the differences between two pieces of serialized data. They found something similar to what they were wanting but it didn't provide the "easy editiing" functionality they wanted. He then goes through some of the issues they bumped up against along the way: working with the data and PHP's unserialize, the creation of their own parser, the work to create the Vue.js frontend and re-serializing the data once complete.

They've also open sourced the project over on GitHub so you can clone it locally and contribute back.

tagged: serialized data editor project introduction github vuejs

Link: https://deliciousbrains.com/announcing-serializededitor-com-visual-editor-php-serialized-data/

Freek Van der Herten:
Building a realtime dashboard powered by Laravel and Vue (2017 edition)
Jun 27, 2017 @ 09:53:33

Freek van der Herten has a recent post to his site sharing a project that was created by the team at Spatie to show real-time information on a large display there in the office. In his post he details how this system was created using Laravel for the backend and Vue.js for the frontend.

At Spatie we have a tv screen against the wall that displays a dashboard. This dashboard displays the tasks our team should be working on, important events in the near future, which music is playing at our office, and so on.

We’ve opensourced our dashboard, so you can view the entire source code on GitHub. It is built with Laravel 5.4 and Vue.

He goes through some of the history behind the project and how it was designed to replace some initial efforts with Dashing. He covers the basic functionality of the system with a high level overview and what kind of information it's displaying. From there he gets into more of the technical details of the dashboard including the grid setup, server-side code, client side Vue.js functionality and packages involved.

tagged: dashboard laravel vuejs tutorial github opensource display

Link: https://murze.be/2017/06/building-realtime-dashboard-powered-laravel-vue-2017-edition/