Freek Van der Herten has a tutorial posted on his site sharing the 2018 edition of how to build a dashboard powered by Laravel, Vue, Pusher and Tailwind CSS. It's based on a project they use internally to keep up to date on current work, events and even music people are listening to.

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 tasks each of our team members should be working on, what music they are listening to, and so on.

[...] This dashboard is not entirely new. The initial version was published a couple of years ago. At our company, we like to tinker with new stuff. That's why we perform a big cleanup of the source code every year. We also update all the dependencies and technologies used. This year we focused on updating the design. The dashboard now uses Tailwind CSS. In this blog post, which is an update to the previous one, I like to explain how this dashboard is built.

He starts with a bit of history of the project and a look at the UI before diving into the code. The remainder of the (lengthy) tutorial is then broken down into functional pieces, each with code and explanation:

• the creation of the markup for the grid
• a closer look at the "internet connection" component
• a closer look at the "statistics" component
• the use of "dark mode" depending on the sun being up
• displaying sites that are down

There's also a mention of the security requirements involved in the creation and use of the dashboard, the hardware used to show it on the TV and how data is saved to prevent the need for the initial "reboot" of the data.

On The Coding Machine site author Julien Neuhart has written up a tutorial showing how to create a single-page application using Symfony 4 along with Vue.js, the Vue router, Vuex and Axios.

With Symfony, I used to build my web applications in a traditional way: the framework handles everything, from the routing to the page rendering. However nowadays web applications have complex user interactions and the previous approach does not fit well for such cases. That's where single-page application architecture comes to the rescue.

The tutorial walks you through the creation of an application where users can post messages wrapped up in a nicer Docker-ized environment. He starts with the creation of the development environment and project structure including the Docker setup and installation of the needed dependencies. From there he starts in on the frontend, creating the Vue.js code for the application and moving to the backend for the initial Symfony index route. He shows the creation of the Vue routing, handing the requests in Symfony, the creation of the Post entities and API functionality.

The post also includes the addition of User entities with usernames/passwords for authentication and the Symfony routes to handle those requests. The tutorial ends with some improvements to the initial setup including user role addition, CSRF tokens, error messaging and other Docker customizations.

On the TutsPlus.com site they've posted a tutorial that, making use of the Pusher service, walks you through the process of creating a multi-channel chat application using it, PHP and Vue.js.

In this post, I'll show you how to write the functional components of a very simple chat app. It's a stripped-down example, but you'll see how Channels can simplify the implementation of real-time communication in a web app.

While the post does include a screencast of the process, it also walks through it in a text format, helping you:

• set up the server with the Pusher PHP package
• create the client code on the backend and frontend
• send messages between the chat windows

The Channels functionality makes it simple to subscribe and see only the messages you want (and not everything that comes down the line). The Pusher PHP library makes the integration simple too.

On the DeliciousBrains.com site they've posted a tutorial showing you how to create a WordPress plugin using Vue.js to make interaction with the page simpler (and nicer than just a normal page reload).

It’s been a while since we’ve played with Vue JS on this blog, so why don’t we take a beginner-focused look at how one might go about building a simple polling plugin for WordPress with Vue.

Why Vue? Vue can scale up to be used for full-blown single page applications, but you can also use it to add small bits of interactivity to sites, pages, or plugins where in the past you may have used jQuery.

[...] Why a polling plugin? There are scores of polling plugins for WordPress, most of them are free, and most of them will be better than the one we’re going to build today, but there is something missing from the current offering of polling plugins: none of them are polka themed…

They start off with the PHP code required to power the plugin (a.k.a. "Pollka King") and load the required resources. They make use of a shortcode to refer to the plugin and show the structure they'd like to use in the editor to create the poll. The backend and frontend code is included along with screenshots of how it should look along the way.

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.

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.

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.

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.

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.

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.