A modern Vue 3 application that displays information about countries using the REST Countries API.
- Country Listing: Browse all countries with detailed information
- Country Details: View comprehensive country information including population, region, capital, and more
- Search: Fuzzy search countries by name using Fuse.js
- Filter by Region: Filter countries by region
- Sorting: Sort countries by name or population (ascending/descending)
- Pagination: Navigate through countries with pagination controls
- Dark/Light Mode: Toggle between dark and light themes
- Responsive Design: Mobile-first responsive layout
- Loading States: Loading indicators for better user experience
- Error Handling: Graceful error handling with user feedback
- Hover Effects: Interactive button and card hover states
- Vue 3 Composition API: Modern Vue.js with
<script setup>syntax - TypeScript: Full type safety throughout the application
- Vue Router: Client-side routing with state persistence
- Tailwind CSS: Utility-first CSS framework with custom theming
- FontAwesome Icons: Professional icon set
- Axios: HTTP client for API requests
- Vitest: Unit testing framework
- Prettier: Code formatting
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Run tests
npm run test
This application uses the REST Countries API to fetch country data.