Book Image

Building Forms with Vue.js

By : Marina Mosti
Book Image

Building Forms with Vue.js

By: Marina Mosti

Overview of this book

Almost every web application and site out there handles user input in one way or another, from registration forms and log-in handling to registration and landing pages. Building Forms with Vue.js follows a step-by-step approach to help you create an efficient user interface (UI) and seamless user experience (UX) by building quick and easy-to-use forms. You’ll get off to a steady start by setting up the demo project. Next, you’ll get to grips with component composition from creating reusable form components through to implementing the custom input components. To further help you develop a convenient user input experience, the book will show you how to enhance custom inputs with v-mask. As you progress, you’ll get up to speed with using Vuelidate and Vuex to effectively integrate your forms. You’ll learn how to create forms that use global state, reactive instant user input validation and input masking, along with ensuring that they are completely schema-driven and connected to your application’s API. Every chapter builds on the concepts learned in the previous chapter, while also allowing you to skip ahead to the topics you’re most interested in. By the end of this book, you will have gained the skills you need to transform even the simplest form into a crafted user and developer experience with Vue.
Table of Contents (15 chapters)
Title Page
Dedication
Foreword

To get the most out of this book

In order for you to follow this book easily, I have to make some assumptions regarding some pre-existing knowledge on your end. Here's a checklist of the basic requirements you need in order to get the most out of this book:

  • You have used HTML, CSS, and JavaScript before and are comfortable creating basic web applications.
  • You are familiar with console.log statements and the general debugging of web apps in a browser such as Chrome.
  • Basic knowledge of Terminal commands. You should know how to navigate folders with the cd command at the very least.
  • You understand basic concepts of Vue, such as state, reactivity, interpolation, computed properties, and methods. Make sure that you take a look at the Essentials part of the official guide for reference: https://vuejs.org/v2/guide/.
  • You have access to a computer and an internet connection to download and install the required libraries and project files.

In the first chapter of this book, we will go over how to set up your project with an easy-to-follow step list.

Download the example code files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

  1. Log in or register at www.packt.com.
  2. Select the Support tab.
  3. Click on Code Downloads.
  4. Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR/7-Zip for Windows
  • Zipeg/iZip/UnRarX for Mac
  • 7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Building-Forms-with-Vue.jsIn case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

Code in Action

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Let's get started with the installation of the v-mask library."

A block of code is set as follows:

<input 
type="text"
v-model="form.telephone"
v-mask="'(###)###-####'"
>

Any command-line input or output is written as follows:

> npm install v-mask

Bold: Indicates a new term, an important word, or words that you see on screen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Go back to the first tab, Response & Body."

Warnings or important notes appear like this.
Tips and tricks appear like this.