TheCodingMachine.io: Building a Single-Page Application with Symfony 4, Vue.js, Vue Router, Vuex and

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.