A web dev expert and Vue.js advocate discuss some techniques developers can use to create a full-stack app with this great framework and learn.
What is Vuebnb: A Full-Stack Vue.js?
As a full-stack app, Vuebnb consists of two distinct parts:
1. Front-End
The front-end application, built with Vue.js. I also used Vue Router to create the pages and Vuex for managing the 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.
2. Back-End
The back-end application is 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.
Sharing Data Between the Back and Front Ends
One of the key considerations of full-stack apps is how to communicate data between the back and front ends, so I spend considerable time dealing with this in the book. For example, how does the data for a listing get from Laravel to a page within Vue.js? By using Blade views it's easy to inject data into the head of the page using template variables. This data can then be retrieved from the Vue app when it initializes. But if Vue Router is used to create virtual pages, how is subsequent page data retrieved? The solution involves a synergy of Blade, Vue Router, Vuex, and Axios to create a surprisingly simple mechanism for retrieving data when and where it's needed.
What is Vuebnb: A Full-Stack Vue.js
Some example of Vuebnb: A Full-Stack Vue.js
-
- http://vuebnb.vuejsdevelopers.com/
- https://github.com/fsvwd/vuebnb