Matt Stauffer has posted the next article in his series of "What's New in Laravel 5.3" series with this article covering the use of Vue.js with Laravel and some of the bootstrapping that makes it easier.

In Laravel 5.3, it's easier than ever to write and use Vue components out of the box. This means 5.3 has a somewhat more opinionated default frontend stack than previous versions do. But never fear—it's easy to strip out the default components.

Let's explore 5.3's JavaScript stack together. Spin up a sample app using the Laravel installer (or, if you're like me, use Lambo) and open up the site in your favorite IDE.

He starts with the sample definitions of the package.json and Gulp files, including some dependencies including Vue.js itself and the Vue Resource packages. He then shows a sample app.js file to define the main part of the application and a matching bootstrap.js with a bit of, well, bootstrapping for the application. Finally he creates the example component, runs yarn/gulp and updates a Blade template to lay out the main application div and include the application Javascript file. Finally he shows what the resulting application should look like with screenshot included.

Matthew Weier O'Phinney has a new post to his site today showing you how you can automate PHPUnit runs while doing local development with the help of a little Node.

I've been trying to automate everything this year. When working on OSS, this is usually as simple as setting up Travis CI; in some cases, even that becomes a little more involved, but remains possible.

But that's continuous integration. What about continuous development? With continuous integration, every time I push to a branch associated with a pull request or on the origin repository, a build is triggered. [...] Ideally, I should also be testing locally. [...] I'd like to automate running these as part of my development process. I want continuous development cycles.

He then walks you through the automation setup he's devised for his own local development, adding a few lines to his Composer configuration for scripts to run when "composer check" is called. This is where Node comes in: he uses Gulp (and a few dependencies) to watch the filesystem for changes. With that setup configured and working, he can then just run "gulp" and a Node process executes and watches for those changes. When an update is discovered, "composer check" is executed and a system notification is fired if an error pops up. He's also created a package you can use to set this all up a bit simpler, only requiring a single command to execute.

The Symfony Finland blog has posted a guide with a simple frontend workflow for those working in Symfony-based applications. He shows how to easily integrate and work with Gulp from inside of your application with relative ease.

In Symfony 2.7 the team introduced the asset component. It allows for a standard method for linking to front end assets in your bundles, but has no say in how assets are built. It is agnostic to whether assets are built with Gulp, Grunt, Webpack or some other tool.

[...] All files placed in the Resources/public -directory within a bundle is made available to the web server using a Symfony Command for assets install. Since Symfony 2.6 it has featured symlinking to the real asset directories, making the requirement to run the command limited to the times you add new bundles.

He shows how to use the assets component and its related commands to set up the symlink for a new bundle. He then helps you get the foundation command line tool installed and create a simple Gulp configuration file to build out your SASS files and compile them. From there using the setup is as easy as adding a tag to the Twig template, making a call to the asset method and pointing to the required resulting CSS file from the compile.

The SitePoint PHP blog has a new tutorial posted introducing you to Elixir, the "Laravel way" of working with assets in your application and making it easier and more unified.

In today’s web applications, we use a wide variety of tools to speed up the development workflow while keeping the code base as lean as possible. [...] One such type of tool are preprocessors for CSS and JavaScript. [...] Besides preprocessors, there are also many tasks we as developers often have to do, including linting JS files, testing, concatenation, minification, just to name a few.

All this led to the creation of JavaScript-based task runners like Grunt and Gulp. [...] Gulp syntax is clean and easy to use, but there’s always room for doing things the easier way. Laravel 5 introduced Elixir: a Node.js based tool developed by Jeffrey Way, which manages our Gulp tasks the easy way.

They start with the requirements you'll need to get Elixir up and running, including Node.js and Gulp itself (it's a "frontend" for it, not a replacement). They talk about where Elixir assumes your assets will live and some examples of:

• Compiling Less files
• Compiling CoffeeScript files
• Compiling multiple files at once
• Using different source and output directories
• Concatenation files

...and much more. They also show how to perform Jade->Blade compilation for templating and how to configure Elixir to match your needs. The post ends with a more "real world" example with a full site structure, how to run the tasks and some more advanced topics (like custom tasks and using the assets in Blade templates).

The SitePoint PHP blog has a tutorial posted showing you how to combine Laravel and AngularJS to create flexible and easily maintainable applications on both the frontend and backend of the app. He also covers a topic he says other tutorials leave out: scaling.

In this article, we’re going to set up a Laravel API with Angular Material for the front end. We’re also going to follow best practices that will help us scale with the number of developers working on the project and the complexity behind it. Most tutorials cover this topic from another perspective – they completely forget about scaling. While this tutorial is not targeted at small todo apps, it is extremely helpful if you’re planning to work with other developers on a big project.

He includes a link to the final product in action and spends the rest of the tutorial walking you through it's construction. First he sets up the Laravel application, also installing the debug bar for easier debugging. He installs gulp, bower and the "laravel-elixir-angular" package to make creating the AngularJS frontend simpler. He shows how to create the folders for the Angular application and the creation of the gulpfile.js configuration to build out the app. He uses bower to install the latest Angular, builds out the main module and connections the frontend to the backend.

From there he starts building out the actual application that outputs some basic content, generated by Angular. He hooks in some other pieces of functionality and libraries including: ui-router, Restangular, Toast and the use of dialogs. He ends with a look at deploying the application and maintaining code quality via jshint, phpcs and JSCS.

On the Laravel News site today there's a tutorial posted showing you how to set up an application that uses Elixir and Bootstrap for the layout of an application. Elixir is a wrapper for gulp, a build tool for node.js apps.

One exciting feature coming in Laravel 5 is the new Elixir package. At its core it is a wrapper around gulp to make dealing with assets easier. For my first look at this new tool I decided a good use case would be to setup Bootstrap and get everything working just like you would in a real world scenario. If you are not familiar, bootstrap includes three main components. CSS, JavaScript, and custom fonts. So we need to account for all those in our setup.

They walk you through the Elixir installation process (via node) of Gulp and setting up dependencies via Laravel's included "package.json" definition. He then shows how to install bower (another package manager) and use that to install the Bootstrap files (SASS version). Finally they show how to bootstrap these into your application's workflow - the SASS imported from bower, the fonts/javascript pulled in by gulp and finally the Elixir setup to merge them all together.