Full-Stack Vue.js 2 and Laravel 5 Book Review

Here at Steadfast Collective, we are always looking at ways to improve and develop our skills. This helps us keep up to date with new web development tools and makes sure that we can deliver great modern web applications to our clients.

We recently read Full-Stack Vue.js 2 and Laravel 5 - by Anthony Gore - so we could gain a better understanding of how to build a complete web application using Vue.js and Laravel 5. As a studio, we use Laravel on a daily basis and wanted to learn more about Vue.js.

The book consists of building an entire application, similar to Airbnb, named Vuebnb by the author. It starts with an introduction to Vue.js and key concepts, before starting building a prototype of the main app using only Vue.js. This helps to get you started and gives you a better understanding of some the concepts learned previously. The book then moves on to the main application development, explaining in detail the whole process for both backend and frontend.

A few things we've learned

Single-File Components (SFCs)

Using Vue.js components, it is possible to create custom elements that can be reused by our app. When a component is registered, it’s basically defining a template which renders as one or more standard HTML elements.

SFCs are files that contain the complete definition of a single component and have the advantage that they can be imported into the Vue.js app.

It has three root elements:

• template

• script

• style

The component is defined inside the script tag and it will:

• Export an ES module

• Not need a template property or a render function

The template is declared as HTML markup inside the template tag. And the style tag contains CSS rules for the component, which helps with the organisation of the app CSS.

Here's an example:

TestComponent.vue

<template>
	<div id="test-component">{{ title }}</div>
</template>

<script>
	export default {
		data() {
			title: 'Test Component'
		}
	};
</script>

<style>
.test-component {
	color: blue;
}
</style>

app.js

import TestComponent from './TestComponent.vue'

new Vue({
	el: '#app',
	components: {
		TestComponent
	}
});

Scoped slots

A scoped slot can be used to make a component more versatile. With scoped slots, it’s possible to pass a template to the slot instead of a rendered element. When this template is declared in the parent, it will have access to any props supplied by the child.

A component child with a scoped slot:

<div>
	<slot test-prop="Hello from child"></slot>
</div

A parent that uses this component will declare a template element that will have a property slot-scope naming an alias object. Any props added to the slot in the child template are available as properties of the alias object:

<child>
	<template slot-scope="props">
		<span>Hello from parent</span>
		<span>{{ props.test-prop }}</span>
	</template>
</child>

This will render:

<div>
	<span>Hello from parent</span>
	<span>Hello from child</span>
</div>

Vue Router

Vue Router is an official Vue.js router library, optimised to use with Vue.js. With this library, different pages of the application are represented by different components. In the configuration, a URL is set to map to a component. When a link is clicked in the app, Vue Router will swap to the active component that matches the URL, for example:

let routes = [
	{ path: '/', component: HomePage },
	{ path: '/about', component: AboutPage },
	{ path: '/contact', component: ContactPage }
];

These are just a few brief examples of what we’ve learned that was applied while building the Vuebnb application. Along the process, we’ve built an API with Laravel to be used in the frontend with Vue.js. We’ve built things like an image carousel, a modal to view images in detail, switch pages without loading from the server and much more...

We think this is a really good book to get you started with Vue.js and definitely recommend it.

For an overview of the final app you can visit this link.

If you liked what you read and want to get the book you can find it on amazon.

We'd love to know what you've been reading to further help develop your development skills. Leave us a comment below to share your thoughts or recommended reading list.