Vue3ContactsComputed

vue3contactscomputed.md

Task: Vue3 Contacts and Computed

Objective:

Implement a contacts management application using Vue3, with a focus on utilizing Vue's reactive and computed properties to efficiently manage and display a list of contacts.

Requirements:

1. Project Setup:

   • Initialize a new Vue3 project using Vue CLI or Vite.
   • Install necessary dependencies like Vue Router for page navigation if needed.

2. Contacts Data Structure:

   • Define a contacts array in the data option of your main Vue component.
   • Each contact in the array should be an object with at least the following fields: first name, last name, and phone.

3. Display Contacts:

   • Use v-for to render each contact in the contacts array.
   • Display the name, and phone number of each contact in a structured and styled list.

4. Add New Contact:

   • Implement a form to add a new contact to the contacts array.
   • Ensure that the form has validation to check for the presence of the name, and phone fields.

5. Computed Properties:

   • Implement a computed property to filter the list of contacts based on a search query entered by the user.
   • The search should be case-insensitive and should match any part of the contact's name.

6. Bonus (Optional):

   • Add the ability to edit or delete contacts.
   • Use local storage to persist the contacts list between page reloads.
   • Implement transitions or animations when contacts are added or removed from the list.

Guidelines:

• Make sure your application is neatly organized and your code is well-commented.
• Focus on writing clean, efficient, and maintainable code.
• Test your application thoroughly to ensure all functionality works as expected.

Submission:

Submit your completed project through the github PR assigned to saikksub, ensuring you include all source files and a README with setup and usage instructions.