Categories
Vue 3 Projects

Create an Address Book App with Vue 3 and JavaScript

Spread the love

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an address book app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create address-book

and select all the default options to create the project.

We also need to install the uuid package so that we can generate unique IDs for each grade entry.

To install it, we run:

npm i uuid

Create the Address Book

To create the address book app, we write:

<template>
  <form @submit.prevent="addContact">
    <div>
      <label>name</label>
      <input v-model="contact.name" />
    </div>
    <div>
      <label>address</label>
      <input v-model="contact.address" />
    </div>
    <div>
      <label>phone</label>
      <input v-model="contact.phone" />
    </div>
    <button type="submit">add</button>
  </form>
  <div v-for="(contact, index) of contacts" :key="contact.id">
    <p>name: {{ contact.name }}</p>
    <p>address: {{ contact.address }}</p>
    <p>phone: {{ contact.phone }}</p>
    <button type="button" @click="deleteContact(index)">delete </button>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";

export default {
  name: "App",
  data() {
    return {
      contact: {
        name: "",
        address: "",
        phone: "",
      },
      contacts: [],
    };
  },
  computed: {
    formValid() {
      const { name, address, phone } = this.contact;
      return (
        name &&
        address &&
        /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s.]{0,1}[0-9]{3}[-\s.]{0,1}[0-9]{4}$/.test(
          phone
        )
      );
    },
  },
  methods: {
    addContact() {
      if (!this.formValid) {
        return;
      }
      const { name, address, phone } = this.contact;
      this.contacts.push({ id: uuidv4(), name, address, phone });
    },
    deleteContact(index) {
      this.contacts.splice(index, 1);
    },
  },
};
</script>

We have a form with the @submit directive to listen for submit events which is triggered by the add button.

The prevent directive lets us do client-side form submission instead of server-side.

Inside it, we have the input fields to let us add the name, address, and phone number of the contact.

Below that, we have the divs rendered with the v-for directive to render the content of the contacts reactive property array.

The key prop is required and it should be a unique ID so that Vue 3 can discern the entries properly.

Inside it, we render the name, address, and phone properties of the contact .

And we add a delete button so that the contact can be deleted.

In the script tag, we return the reactive properties in the data method.

The formValid computed properties checks whether name , address , and phone are valid.

We check the phone number with a regex.

We allow parentheses for the prefix, dashes in between the segments, and 10 digits in total.

The test method lets us check if a string matches the given regex object.

In the addContact method, we check formValid to see if all the values are valid.

If it is, then we call push to add an entry into the contacts array.

uuidv4 generates the unique ID for the entry.

deleteContact deletes the contact with splice and the index .

Conclusion

We can add an address book easily with Vue 3 and JavaScript.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *