About the Book
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.
About the Authors
Raymond Camden is a developer advocate for IBM. His work focuses on the MobileFirst platform, Bluemix, hybrid mobile development, Node.js, HTML5, and web standards in general. He is a published author and presents at conferences and user groups on a variety of topics. Raymond can be reached at his blog, on Twitter, or via email. He is the author of many development books, including Apache Cordova in Action and Client-Side Data Storage.
Hugo Di Francesco is a software engineer who has worked extensively with JavaScript. He holds a MEng degree in mathematical computation from University College London (UCL). He has used JavaScript across the stack to create scalable and performant platforms at companies such as Canon and Elsevier. He is currently tackling problems in the retail operations space with Node.js, React, and Kubernetes while running the eponymous Code with Hugo website. Outside of work, he is an international fencer, in the pursuit of which he trains and competes across the globe.
Clifford Gurney is a solution-focused and results-oriented technical lead at a series-A funded startup. A background in communication design and broad exposure to leading digital transformation initiatives enriches his delivery of conceptually designed front-end solutions using Vue JS. Cliff has presented at the Vue JS Melbourne meetups and collaborates with other like-minded individuals to deliver best in class digital experience platforms.
Philip Kirkbride has over 5 years of experience with JavaScript and is based in Montreal. He graduated from a technical college in 2011 and since then he has been working with web technologies in various roles.
Maya Shavin is a senior frontend developer, speaker, blogger, Storefront UI core member, and the founder and organizer of VueJS Israel Meetups.
Who This Book Is For
This book is for developers who are just getting started with Vue.js and are looking to gain a basic understanding of Single-Page Application (SPA) patterns and learn how to create scalable enterprise applications using Vue.js. You'll also find this book useful if you already use React or Angular and want to start learning Vue.js. To understand the concepts explained in this book, you must be familiar with basic HTML, CSS, JavaScript (such as objects, scopes, this contexts, and values versus references), and Node Package Manager (NPM).
About the Chapters
Chapter 1, Starting Your First Vue Project, sees you creating Vue components immediately. You'll learn the basics of Vue.js as well as understand reactivity in JavaScript applications.
Chapter 2, Working with Data, provides information on more component building blocks using computed data props, observing state changes with watchers, and utilizing asynchronous APIs.
Chapter 3, Vue CLI, is a deep dive into Vue's quality-of-life toolkit. You'll understand how to use the Vue CLI and browser DevTools.
Chapter 4, Nesting Components (Modularity), looks at approaches to passing data across components to modularize them.
Chapter 5, Global Component Composition, dives deep into ways to share component functionality across a Vue.js code base.
Chapter 6, Routing, covers the use of standard and dynamic routing with Vue. You'll learn how to create an SPA with complex multi-page applications in Vue.
Chapter 7, Animations and Transitions, covers the built-in animations and transitions that come with Vue as well as using external JavaScript libraries for Vue. We'll create custom animations to be used in a demo app.
Chapter 8, The State of Vue.js State Management, provides a view into different approaches for Vue.js state management.
Chapter 9, Working with Vuex – State, Getters, Actions, and Mutations, introduces you to the Vuex library for state management in Vue.
Chapter 10, Working with Vuex – Fetching Remote Data, discusses how to use Vuex and remote APIs.
Chapter 11, Working with Vuex – Organizing Larger Stores, helps you organize and manage large Vuex stores.
Chapter 12, Unit Testing, looks at testing individual pieces of a Vue.js application, including components, filters, and mixins.
Chapter 13, End-to-End Testing, introduces Cypress, which is used for writing end-to-end tests for a Vue.js application.
Chapter 14, Deploying Your Code to the Web, looks at modern best practices in continuous integration/continuous deployment and considers how to deploy a Vue.js application to multiple hosting providers.
Conventions
Code words in text, database table names, folder names, filenames, file extensions, path names, dummy URLs, user input, and Twitter handles are shown as follows:
"A panic() function accepts an empty interface."
Words that you see on the screen, for example, in menus or dialog boxes, also appear in the same format.
A block of code is set as follows:
<template> <div> Vue Template Code </div> </template>
New terms and important words are shown like this: "These behaviors are collectively called method sets."
Reference to other chapters and images are shown like this: "Figure 2.15 displays the output generated by the preceding code."
Key parts of code snippets are highlighted as follows:
<input id="phone" type="tel" name="phone" v-model="phone" class="border-2 border-solid border-blue-200 rounded px-2 py-1" />
Long code snippets are truncated, and the corresponding names of the code files on GitHub are placed at the top of the truncated code. The permalinks to the entire code are placed below the code snippet. It should look as follows:
Exercise1-12.vue
17 <script>
18 export default {
19 data() {
20 return {
21 list: [
22 'Apex Legends',
23 'A Plague Tale: Innocence',
24 'ART SQOOL',
25 'Baba Is You',
26 'Devil May Cry 5',
27 'The Division 2',
28 'Hypnospace Outlaw',
29 'Katana ZERO',
30 ],
31 }
32 },
33 methods: {
34 deleteItem(value) {
35 this.list = this.list.filter(item => item !== value)
36 },
37 },
38 ...
The complete code for this step is available at https://packt.live/3pJGLvO.
Before You Begin
Every great journey begins with a humble step. Our upcoming adventure with Vue.js is no exception. Before we can do awesome things using Vue, we need to be prepared with a productive environment. In the following short sections, we shall see how to do that.
Minimum Hardware Recommendations for Running Node.js Applications
To be able to run all the recommended tools used in the book, it's recommended that you have the following:
- 1 GHz or faster desktop processor
- 512 MB of RAM (at a minimum; more is better)
- Windows 32/64 bit, macOS 64 bit, Linux ARMv7/v8
Installing Node.js
Node.js is required to be installed on your computer in order for Vue.js to run. Download the latest LTS version by following the instructions for Windows, macOS, and Linux at https://nodejs.org/en/download/. Node.js is free to install and use.
Installing Git
Node.js applications use the version control tool Git to install extra tools and code. You can find the installation instructions for Windows, macOS, and Linux at https://git-scm.com/book/en/v2/Getting-Started-Installing-Git. Git is free to install and use.
Installing Yarn
Some exercises will use the Yarn dependency manager to install and run Vue.js applications. You can find the instructions to download and install Yarn for Windows, macOS, and Linux at https://classic.yarnpkg.com/en/docs/install. Yarn is free to install and use.
Installing Vue.js CLI (the Vue Command-Line Interface)
Some exercises will require you to use the Vue.js CLI. You can find the instructions to download and install the Vue.js CLI at https://cli.vuejs.org/guide/installation.html.
Installing Visual Studio Code (Editor/IDE)
You need something in which to write your Vue source code. This tool is called an editor or an Integrated Development Environment (IDE). If you already have an editor you like, you can use it with this book if you'd like to.
If you don't already have an editor, we recommend you use the free Visual Studio Code editor. You can download the installer from https://code.visualstudio.com:
- After it is downloaded, open Visual Studio Code.
- From the top menu bar, select
View. - From the list of options, select
Extensions. A panel should appear on the left side. At the top is a search input box. - Type
Vetur. The first option should be an extension calledVeturbyPine Wu. - Click the
Installbutton on that option. Wait for a message that says it's successfully installed.
Installing the Code Bundle
Download the code files from GitHub at https://packt.live/3nOX2xE. Refer to these code files for the complete code bundle.
Get in Touch
Feedback from our readers is always welcome.
General feedback: If you have any questions about this book, please mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you could report this to us. Please visit www.packtpub.com/support/errata and complete the form.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you could provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Please Leave a Review
Let us know what you think by leaving a detailed, impartial review on Amazon. We appreciate all feedback – it helps us continue to make great products and help aspiring developers build their skills. Please spare a few minutes to give your thoughts – it makes a big difference to us.