Front-End Development Projects with Vue.js

Learn to build scalable web applications and dynamic user interfaces with Vue

Raymond Camden, Hugo Di Francesco, Clifford Gurney, Philip Kirkbride, Maya Shavin

• Publisher: Packt Publishing
• Year: 2020
• Print ISBN: 9781838984823
• eBook ISBN: 9781838981044
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Get to grips with the core fundamentals of Vue.js 2 and learn to build reliable component-based applications with practical guidance from industry experts

Key Features

• Learn how to make the best use of the Vue.js 2 framework and build a full end-to-end project
• Build dynamic components and user interfaces that are fast and intuitive
• Write performant code that "just works" and is easily scalable and reusable

Book Description

Are you looking to use Vue 2 for web applications, but don't know where to begin? Front-End Development Projects with Vue.js will help build your development toolkit and get ready to tackle real-world web projects. You'll get to grips with the core concepts of this JavaScript framework with practical examples and activities.

Through the use-cases in this book, you'll discover how to handle data in Vue components, define communication interfaces between components, and handle static and dynamic routing to control application flow. You'll get to grips with Vue CLI and Vue DevTools, and learn how to handle transition and animation effects to create an engaging user experience. In chapters on testing and deploying to the web, you'll gain the skills to start working like an experienced Vue developer and build professional apps that can be used by other people.

You'll work on realistic projects that are presented as bitesize exercises and activities, allowing you to challenge yourself in an enjoyable and attainable way. These mini projects include a chat interface, a shopping cart and price calculator, a to-do app, and a profile card generator for storing contact details.

By the end of this book, you'll have the confidence to handle any web development project and tackle real-world front-end development problems.

What you will learn

• Set up a development environment and start your first Vue 2 project
• Modularize a Vue application using component hierarchies
• Use external JavaScript libraries to create animations
• Share state between components and use Vuex for state management
• Work with APIs using Vuex and Axios to fetch remote data
• Validate functionality with unit testing and end-to-end testing
• Get to grips with web app deployment

Who this book is for

This book is designed for Vue.js beginners. Whether this is your first JavaScript framework, or if you're already familiar with React or Angular, this book will get you on the right track. To understand the concepts explained in this book, you must be familiar with HTML, CSS, JavaScript, and Node package management.

1. Starting Your First Vue Project

Overview

In this chapter, you will learn the key concepts of Vue.js and why you should consider Vue.js for your next project. You will learn how to run Vue projects from the command line; describe the Vue.js project architecture; create Vue single file components using various styling and HTML syntax flavors; and also write Vue methods and data objects and control HTML templates competently.

By the end of this first chapter, you will be able to describe the basics of Vue lifecycle hooks and expressions.

Introduction

Developers in the industry are required to resolve frontend development problems quickly with minimal impact on existing workflows or backend architecture. In many cases, the UI is overlooked completely until the end of a project, which can happen because of a lack of resources, ever-evolving product requirements, or the existing attitude that the frontend is the easy bit. However, companies such as Apple and Google have proven that design thinking on the frontend is key to a solid product or platform that will excite and engage users leading to a higher return on investment and a more successful business.

If you have found Vue.js, you may have also come across other frontend frameworks that, at face value, solve the same problems such as Ember, Angular, or React. At the surface level, they all attempt to make reactive frontend development more reliable and introduce patterns that make this easier to do. However, there are some critical differences in how a Vue project might play out compared to an Angular or React project. Let's look into them.

Angular versus Vue

Angular is a Model-View-ViewModel (MVVM) framework built by Google that, generally, enterprise companies in the past tended to favor because of Google's backing and the fact that from the ground up, Angular was created to be used alongside TypeScript. The ecosystem supporting Angular includes Ahead of Time (AoT) rendering, and router and CLI management, but fails to deliver a simplified global state management system; developers would need to learn and use Flux or adopt NgRx. Vue takes Angular's core ideas of robustness and reliability and improves the development experience with its agnostic approach to development by removing the restrictiveness of an enforced code style for developers. Simplifying familiar Angular patterns such as HTML directives and dependency injection for modularity with Vue's single-file component system benefits developers by removing the necessity to learn and remember a variety of structures (injectables, components, pipes, modules, and so on). Vue has excellent support for TypeScript and typing without the drawbacks that Angular can have with its enforced coding language and development style. React and Vue share a focus on component-driven development, which reduces the amount of time and effort needed to uptake a new framework.

React versus Vue

The driving force behind React's popularity and large development community is attributed to Facebook's dedicated engineers and its 2013 open source release at a time when Angular 2+ was nowhere to be seen. React's JSX pattern (a way of writing HTML and CSS in JavaScript) introduces with it a heightened learning curve for new developers who are both required to learn another language and also wrap their heads around component-based architecture. Components allow developers to build applications in a modular way; individual components describe their own piece of functionality and lifecycle, where they can be instantiated when they are required and destroyed when they are not used. Vue takes these core concepts of modular coding and enables developers to build these components using either JSX or writing HTML, CSS, and JavaScript as you would a traditional web application in a single file. Vue's separation of concerns in a single-file component simplifies this modular structure for developers.

Advantages of Using Vue for Your Project

Vue has a gentle learning curve and a vibrant ecosystem. This benefits teams of any size by not requiring a huge amount of overhead to educate teams of developers on how to use the Vue.js framework.

• Vue.js is another example of a pattern in development that is easy to learn but ha...

Table of contents

• Front-End Development Projects with Vue.js
• Preface
• 1. Starting Your First Vue Project
• 2. Working with Data
• 3. Vue CLI
• 4. Nesting Components (Modularity)
• 5. Global Component Composition
• 6. Routing
• 7. Animations and Transitions
• 8. The State of Vue.js State Management
• 9. Working with Vuex – State, Getters, Actions, and Mutations
• 10. Working with Vuex – Fetching Remote Data
• 11. Working with Vuex – Organizing Larger Stores
• 12. Unit Testing
• 13. End-to-End Testing
• 14. Deploying Your Code to the Web
• Appendix