Vue Employee CRUD

Reactive CRUD with Vue 3 Composition API and RESTful API

Loading employees...

Profile	Name	Gender	Age	State	Country	Department	Actions

	{{ emp.name }}	{{ emp.genderName }}	{{ emp.age }}	{{ emp.state }}	{{ emp.country }}	{{ emp.departmentName }}

Showing {{ sorted.length === 0 ? 0 : (currentPage - 1) * pageSize + 1 }} to {{ Math.min(currentPage * pageSize, sorted.length) }} of {{ sorted.length }} employees

Name

Please enter a name

Gender

Please select a gender

Age

Please enter age (minimum 18)

State

Please enter state

Country

Please enter country

Department

Please select a department

{{ t.title }}: {{ t.message }}

About Vue Implementation

This implementation demonstrates a Vue 3 SPA using the Composition API loaded via CDN. It consumes the same RESTful endpoints as the React implementation but uses Vue's reactive data binding and declarative template syntax.

Vue Advantages

Gentle learning curve with familiar HTML templates
Fine-grained reactivity system (no Virtual DOM diffing)
Composition API for clean, reusable logic
Two-way binding with v-model simplifies forms

Considerations

Smaller ecosystem than React
CDN mode limits single-file component usage
Template compilation at runtime adds overhead
Requires JavaScript to be enabled in browser

Technical Details

Vue 3

Loaded via CDN. Uses the global build with Composition API (setup()) for reactive state management.

Reactivity

ref(), computed(), and watch() for fine-grained reactive state tracking without Virtual DOM.

Fetch API

Native browser Fetch API for RESTful CRUD operations — no jQuery or Axios dependency.

Implementation by Mark Hazleton View Source Code