This year I’ve been writing a new book called Full-Stack Vue Web Development: Vue.js, Vuex and Laravel. It’ll be published in early 2018 by Packt Publishing.
The book is centred around a case study project, Vuebnb, a simple clone of Airbnb. In this post, I’ll give a high-level overview of how it works so you get a sense of what’s involved in building a full-stack Vue/Laravel app from scratch.
Here’s a live demo if you’d like to check it out: https://vuebnb.vuejsdevelopers.com
As a full-stack app, Vuebnb consists of two distinct parts:
The front-end application, built with Vue.js. I also used Vue Router to create the pages and Vuex for managing global state. The code was initially written in a browser script file, but as the complexity increased a Webpack build-step was required to allow for single-file components and ES+ features.
The back-end application, built with Laravel. Its main job is to serve the front-end app and its assets and also to provide a web service for the listing data. In combination with Vue Router, the web service allows Vuebnb to act like a single-page app. I also used Laravel Passport for authenticating API calls, which is needed for users to be able to save their favorite room listings.
The main features of this project include the UI widgets as well as the general architecture of the app. Let’s do a brief overview: