Vue dynamic forms

This Vue project showcases form handling, state management with Pinia, dynamic routing, component composition, and custom directives.

The project is configured with ESLint to maintain code standards and is also configured with Prettier to ensure code formatting consistency.

It is built using Vite, which offers fast development cycles and efficient production builds.

Live demo: https://matijakocevar.github.io/vue-dynamic-forms

Table of Contents

• Features
  • Form Handling
  • State Management
  • Routing
  • Component Composition
  • Custom Directives
• Setup and Usage
  • Clone the repository
  • Navigate to the project directory
  • Install dependencies
  • Run the application
  • Build for production (optional)
• Dependencies

Features

1. Form Handling:

   • A registration form that collects and submits user's contact information including their name, email, and phone number.
   • Client-side validation to ensure all required fields are correctly filled before submission.
   • Mock Api call to simulate different responses to showcase status change

2. State Management:

   • Leveraging Pinia for state management, the store contains:
     • Registration status: "Error", "Submitted", and "Not submitted".
     • User's registration details: name, email, and phone number.
     • Error messages for registration failures.
   • Upon form submission:
     • User data is stored in the Pinia store.
     • Registration status updates based on the outcome of the submission.

3. Routing:

   • A multi-route Vue application with pages like "forms" and "registration".
   • Navigation between routes.

4. Component Composition:

   • Dynamic component that can render different forms using Vue's named slots. This component supports input validation and submission functionality.

5. Custom Directives:

   • Developed a custom Vue directive that highlights text within a paragraph when a specific attribute is applied (v-highlight). Can be optionaly set to a color and the highlight will be that color.

Setup and Usage

1. Clone the repository

   git clone https://github.com/MatijaKocevar/vue-dynamic-forms.git

2. Navigate to the project directory

   cd vue-dynamic-forms

3. Install dependencies

   npm install

4. Run the application

   npm run dev

5. Build for production (optional)

   npm run build

Dependencies

This project has the following dependencies:

• Node.js
• npm