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.

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.