Live site URL
Functionality:
- This Vue Nuxt application allows users to search for and display information about countries.
- The application fetches country data from the Rest Countries API using Axios.
- It includes components for displaying a list of countries and detailed information about a selected country.
- Users can filter countries by name using a search input field.
- Clicking on a country in the list displays detailed information about that country, including its name, capital, flag, coat of arms, geography, culture, economy, government, national symbols, transportation, time zone, international recognition, sports, exploration, and tourism.
- The application also provides links to Google Maps and OpenStreetMaps for further exploration of each country.
Technologies Used:
- Vue.js: A progressive JavaScript framework for building user interfaces.
- Nuxt.js: A framework built on top of Vue.js that provides server-side rendering, static site generation, and other features for building Vue applications.
- Axios: A promise-based HTTP client for making requests to REST APIs.
- PrimeVue: A Vue UI component library that provides various components for building user interfaces.
- PrimeFlex: A CSS utility library for flexbox-based layout.
- PrimeIcons: A collection of icons for use in web applications.
- TypeScript: A statically typed superset of JavaScript that compiles to plain JavaScript.
- CSS: Cascading Style Sheets for styling the user interface components.
Overview:
This Vue Nuxt application leverages Vue.js and Nuxt.js to create a client-side rendered application for searching and displaying information about countries. It utilizes Axios for fetching data from the Rest Countries API and PrimeVue for UI components. TypeScript ensures type safety throughout the codebase, and CSS is used for styling the components. The application provides a seamless user experience with filtering functionality, detailed country information, and links to external mapping services for further exploration.
Preview:
