This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor.

• REST Countries API with color theme switcher solution using VueJS
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • Useful resources
    • Project Setup For running locally
      • Compile and Hot-Reload for Development
      • Type-Check, Compile and Minify for Production
      • Run Unit Tests with Vitest
      • Lint with ESLint
  • Author

Users should be able to:

• See all countries from the API on the homepage
• Search for a country using an input field
• Filter countries by region
• Click on a country to see more detailed information on a separate page
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode

• Solution URL
• Live Site URL

• HTML5
• TailwindCSS
• Flexbox
• CSS Grid
• Vue - JS library
• Vue Router - React framework
• Pinia - For styles

• custom click-ouside directive - This answer on StackOverflow helped know how to create a cusom click-outside directive that triggers an event when clicked ouside the parent element I used it to close the dropdown when clicking outside of it.
• Data fetching after navigation - This helped me understand how to fetch data after navigation in Vue Router.

pnpm install

pnpm dev

pnpm build

pnpm test:unit

pnpm lint

• Website - Omar Maoud Omar Mahmoud
• Frontend Mentor - @omar-the-junior
• Twitter - @omar_the_junior