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.