Modernize Vue 2 App to Vue 3 with TypeScript -- 2

== Goal ==

Migrate the project's UI Vue 2 components to Vue 3, following the architectural and stylistic approach as it was used in "ProductForm" (have to be taken as example).
The components to be migrated are:
- CustomerForm.vue
- CustomerCreatePage.vue
- CustomerEditPage.vue

The candidates will be granted access to the private GitHub repository and will be able to see the current state of these components.
The goal is to modernize them to match the standards set by "ProductForm".


== Scope of Work ==

1. Vue 3 Migration using Options API
- Follow the updated structure, conventions, and responsive design of "ProductForm"
- Use Vue 3 with the Options API (not Composition API!!)
- Components must use the Options API exclusively — do not use the Composition API for business logic or structure
- Where necessary (e.g. for vue-i18n), use the setup() method within the Options API to access t():
```
setup() {
const { t } = useI18n();
return { t };
}
```

2. VeeValidate Upgrade
- Migrate from VeeValidate v3 to v4
- Use the component-based API:
<VForm>, <VField>, <ErrorMessage>
- Define validation rules directly using the rules prop on <VField>, not via schema
- Follow examples provided in "ProductForm"

3. vue-i18n Upgrade
- Use vue-i18n v9+ (compatible with Vue 3)
- Avoid the legacy $t() API — instead, access t() via setup() and expose it to templates
- Use the <i18n-t> component to render HTML within translation strings

4. Bootstrap 4 → Bootstrap 5.3+ Migration
- Migrate all styles according to the official Bootstrap migration guide

5. Remove Inspinia Styles
- Remove all Inspinia-specific CSS classes and styles
- Replace with clean, modern Bootstrap 5 classes
- Ensure the resulting UI aligns visually with "ProductForm"

6. TypeScript Integration
- Use TypeScript in all migrated files
- Define types for:
- Props
- Data
- Emits
- Computed properties
- Methods
- Follow TypeScript patterns used in "ProductForm"

7. Pinia Migration
- Replace Vuex usage with Pinia
- Access Pinia stores inside setup() using useXxxStore()
- Expose reactive properties with storeToRefs() where necessary
- Note: Stores are already implemented — only update their usage in components

8. Translation Key Cleanup
- Remove all HTML tags from translation keys
- Use <i18n-t> to render embedded HTML safely within templates

9. Improve Responsiveness
- Enhance layout responsiveness and mobile support
- Use Bootstrap 5 grid system, spacing, and utility classes
- Follow layout structures as seen in:
- "ProductForm".vue
- ProductCreatePage.vue
- ProductEditPage.vue

10. Replace PrismJS with CodeMirror in “API Examples” Tab
- In CustomerForm.vue, the “API Examples” tab currently uses PrismJS for syntax highlighting
- Remove PrismJS entirely, including related CSS and JS
- Replace it with the existing CodeMirror.vue component (based on CodeMirror v6)
- Requirements for CodeMirror.vue:
- Must support both JSON and XML syntax highlighting
- Must be read-only
- Must be responsive and allow horizontal scrolling on smaller screens
- Must integrate cleanly with the form’s visual style
- If XML support is missing, extend the component to include the appropriate language package

Note: The “API Examples” tab is unique to CustomerForm — there is no counterpart in "ProductForm"


== Reference Implementation ==

Use the following components as implementation standards:
- ProductForm.vue
- ProductCreatePage.vue
- ProductEditPage.vue

These demonstrate:
- Bootstrap 5 integration
- TypeScript usage
- Options API with setup() for external APIs
- VeeValidate v4 usage (<VForm>, <VField>)
- <i18n-t> implementation
- Mobile-first responsive layout


== Required Skills & Technologies ==

- Vue.js 2 & 3 — strong
- Options API — expert
- TypeScript — strong
- Pinia — intermediate
- VeeValidate v4 — intermediate
- vue-i18n v9+ — intermediate
- Bootstrap 4 → 5.3+ migration — strong
- Responsive design with Bootstrap 5 — strong
- Git (branching, PRs) — intermediate
- Legacy code refactoring — intermediate

Start your proposal with #IGOTIT hashtag to confirm you've read this description in full.


== Deliverables ==

- Fully migrated and modernized components:
- CustomerForm.vue
- CustomerCreatePage.vue
- CustomerEditPage.vue
- All components must pass linting and unit tests and be fully compilable and functional
- GitHub pull request with clear commit history
- Only accepted PR changes will be merged
- The payment will be released upon successful review and merge of the PR!!