Packt+ | Advance your knowledge in tech

Explore Products

Best Sellers

New Releases

Books

Videos

Audiobooks

Free Learning

Full-Stack Vue.js 2 and Laravel 5

You're reading from Full-Stack Vue.js 2 and Laravel 5 Bring the frontend and backend together with Vue, Vuex, and Laravel

Product type Paperback

Published in Dec 2017

Publisher Packt

ISBN-13 9781788299589

Length 376 pages

Edition 1st Edition

Languages

JavaScript

Tools

Laravel

Concepts

Full Stack Web Development

Author (1):

Anthony Gore

View More author details

Table of Contents (11) Chapters

Preface

1. Hello Vue – An Introduction to Vue.js FREE CHAPTER

2. Prototyping Vuebnb, Your First Vue.js Project

3. Setting Up a Laravel Development Environment

4. Building a Web Service with Laravel

5. Integrating Laravel and Vue.js with Webpack

6. Composing Widgets with Vue.js Components

7. Building a Multi-Page App with Vue Router

8. Managing Your Application State with Vuex

9. Adding a User Login and API Authentication with Passport

10. Deploying a Full-Stack App to the Cloud

Save feature

As mentioned, we'll be adding a save feature to our Vuebnb listings. The UI of this feature is a small, clickable icon that is overlaid on the top right of a listing summary's thumbnail image. It acts similarly to a checkbox, allowing the user to toggle the saved status of any particular listing:

Figure 8.5. The save feature shown on listing summaries

The save feature will also be added as a button in the header image on the listing page:

Figure 8.6. The save feature shown on the listing page

ListingSave component

Let's begin by creating the new component:

$ touch resources/assets/components/ListingSave.vue

The template of this component will include a Font Awesome heart icon. It will also include a click handler which will be used to toggle the saved state. Since this component will always be a child of a listing or listing summary, it will receive a listing ID as a prop. This prop will be used shortly to save the state in Vuex.

resources/assets/components/ListingSave.vue:

<template...

The rest of the chapter is locked

Register for a free Packt account to unlock a world of extra content!

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at AU $24.99/month. Cancel anytime

Authors (1)

Anthony Gore

Anthony Gore

Anthony is a web developer and online course instructor from Sydney, Australia. He is the author of the Ultimate Vue.js Developers video course and curator of the Vue.js Developers Newsletter.He has worked for several years as freelancer web developer, but he has also worked for large organisations.He has done development work on all kinds of projects from single page web apps to corporate mega-sites.Besides web development he is a keen musician and enjoys travelling and working remotely.

See other products by Anthony Gore

Other recommended products

Related to this chapter

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

This book will help you gain practical knowledge of building modern full-stack web apps from scratch using Angular with a Laravel back end. You will learn the most important technical facets of developing with Angular and Laravel, and demonstrates how to put those skills into practice.

Jul 2018 14h 0m

Vue.js Quick Start Guide

Vue.js Quick Start Guide

Vue.js is the latest trending frontend framework. Simplicity, reactivity, and ?exibility are some of the key benefits that Vue offers to developers. This book will help you learn everything you need to know to build stunning reactive web apps with Vue.js 2 quickly and easily.

Oct 2018 6h 12m

Vue.js 3 By Example

Vue.js 3 By Example

This book focuses on the popular frontend web framework Vue's latest version, Vue 3.0. You'll explore the Vue ecosystem, discover how you can use it to achieve impressive results in a short space of time, and learn essential Vue 3 concepts by building real-world applications.

Apr 2021 10h 40m

Vuex Quick Start Guide

Vuex Quick Start Guide

State management preserves the state of controls in an user interface. Vuex is a state management tool for Vue.js that makes the architecture easier to understand, maintain and evolve. This book is the easiest way to get started with Vuex to improve your Vue.js application architecture and overall user experience.

Vue.js: Understanding its Tools and Ecosystem

Vue.js: Understanding its Tools and Ecosystem

Vue.js is one of the most preferred JavaScript frameworks and is used by several organizations such as NASA and Expedia. With this book, you'll learn the fundamental concepts of Vue.js and the popular technologies that make up its ever-growing ecosystem.

Nov 2019 6h 28m

Vue.js 3 Cookbook

Vue.js 3 Cookbook

Vue.js is an open-source JavaScript library for building modern, interactive web applications. From basic to advanced recipes, this book arms you with practical solutions to common tasks in building complete Vue.js web applications and helps you migrate to Vue.js 3 with a practical introduction to TypeScript and its latest features.

Sep 2020 18h 44m

Building Vue.js Applications with GraphQL

Building Vue.js Applications with GraphQL

GraphQL is an emerging standard for using APIs for modern web development, making it easier for front-end developers to communicate with the APIs. This book is a tutorial on building a Vue.js-based full-stack chat app using frameworks such as AWS Amplify with GraphQL. The book provides recipes for building and deploying your app from scratch.

Jan 2021 9h 56m

Building Forms with Vue.js

Building Forms with Vue.js

Building forms with Vue.js will guide you step by step to transform your online forms into a schema driven powerhouse. With the use of some of the core and most popular libraries you will be able to go from zero to hero.

Oct 2019 3h 36m

Vue.js 2 Web Development Projects

Vue.js 2 Web Development Projects

Do you want to make your web application amazingly responsive? Are you unhappy with your app's performance and looking forward to trying out ways to make your app more powerful? Then Vue.js, a framework for building user interfaces, is a great choice, and this book is the ideal way to put it through its paces. This book's project-based approach will get you to build six stunning applications from scratch and gain valuable insights in Vue.js 2.5.

Nov 2017 13h 16m

Vue.js 2 Design Patterns and Best Practices

Vue.js 2 Design Patterns and Best Practices

Vue.js is a lightweight and easy-to-learn JavaScript library for building user interfaces. With its faster and lighter Virtual DOM implementation, easier to learn, flexible, less opinionated solution, and many features, Vue.js is giving a good competition to the popular frameworks and libraries such as React and Angular. This book takes a complete journey to exploring the important design patterns in Vue and implementing them in real life scenarios

Mar 2018 11h 28m

Front-End Development Projects with Vue.js

Front-End Development Projects with Vue.js

Front-End Development Projects with Vue.js introduces you to Vue 2 and helps you get started with web application development using this popular framework. You'll master the knowledge and skills needed to become an effective front-end developer and apply them to tackle real-world development challenges.

Nov 2020 25h 48m

Full-Stack Web Development with Vue.js and Node

Full-Stack Web Development with Vue.js and Node

Isomorphic JavaScript was the buzzword of the year 2017, allowing developers to utilize a single language throughout their web development stack and build cost-effective and scalable applications. MEVN is a one such modern web development stack consisting of web applications such as MongoDB, Express.js, Vue.js, and Node.js. Hands-On Full-Stack Web Development with Vue.js 2 and Node.js leverages the harmony of these technologies to help you create full-stack web applications.

May 2018 12h 12m

Personalised recommendations for you

Based on your interests and search pattern

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Reactive Patterns with RxJS and Angular Signals

Reactive Patterns with RxJS and Angular Signals

This RxJS book will help you understand the core concepts of RxJS and provide practical patterns to make your code more reactive and declarative. You'll also understand Angular Signals, which provide another way to improve code reactivity.

Jul 2024 8h 28m

API Testing and Development with Postman

API Testing and Development with Postman

Whether you are a tester or a developer working with APIs, you'll be able to put your knowledge to work with this practical guide to using Postman. The book provides a hands-on approach to implementing and learning the associated methodologies that will have you up-and-running and productive in no time.

Jun 2024 11h 56m

FastAPI Cookbook

FastAPI Cookbook

This book helps you unlock the power of FastAPI to build high-performing web apps and APIs by taking you through the basics like routing and data validation through to advanced topics, such as custom middleware and WebSockets.

Aug 2024 11h 56m

Mastering Spring Boot 3.0

Mastering Spring Boot 3.0

This hands-on guide empowers you to develop scalable and efficient applications. You'll also learn microservices patterns, reactive programming, and security measures for building robust backend systems.

Jun 2024 8h 32m

Nuxt 3 Projects

Nuxt 3 Projects

This book is a comprehensive guide to Nuxt.js, which takes you from the basics to advanced topics. Uniquely, this book emphasizes practical, project-based learning, tackling real-world problems.

Jun 2024 7h 40m

Vue.js 3 for Beginners

Vue.js 3 for Beginners

Learning a new language by following video tutorials, blog posts, and documentation is a tiresome activity. This book will take you on an exciting journey of becoming a proficient Vue.js developer through a practical, step-by-step approach.

Sep 2024 10h 4m

Full-Stack Web Development with TypeScript 5

Full-Stack Web Development with TypeScript 5

The book emphasizes best practices, debugging, performance optimization, and scalable code structure, helping you develop practical skills in frontend and backend development, database integration, and AI integration.

Mastering Flask Web and API Development

Mastering Flask Web and API Development

The book is an introduction to Flask that will showcase its baseline, core, and advanced integration features to enable you to solve enterprise-related problems and issues in both web and API development.

Aug 2024 16h 28m