This SPA fetches user data from jsonplaceholder and displays user information in cards.
- User Cards: each card showcases a user's name, email address and profile picture.
- Profile Pictures: images are sourced from Gravatar. If a user hasn't uploaded a profile picture, Gravatar generates a unique themed image based on the user's email address.
- Client-Side Filtering: search for users by name through a computed property that filters the user list.
- Pagination: implemented using PrimeVue Paginator, allowing for navigation through the user list. Options for items per page are dynamically calculated based on the total number of users to display.
- Loading State: a loading spinner is displayed while user data is being fetched.
- Image Loading State: skeleton loaders are shown until profile images are fully loaded, enhancing the user experience.
- User Detail Popup: when a user card is clicked, a popup displays detailed information about the selected user.
Vue TypeScript Vite Tailwind CSS
To run this application locally:
- Clone the repository:
git clone <repository-url> - Navigate to the project directory:
cd <project-directory> - Install the dependencies:
npm install - Start the application:
npm run dev
The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.