This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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 (optional)
- Vue JS - JS Framework
- Font Awesome - Used for icons
- Axios - Http requests
- Rest countries- Countries API
- Vuetify - Style component framework
- Vue-router - Used for routing in vue3
- TypeScript - JS with syntax for types
I learnt on Vue3 and its composition API and integrating typescript into the build process.
- Changing the vuetify default font family
@use 'vuetify' with (
$utilities: yes,
$color-pack: false,
$body-font-family: 'Nunito Sans'
);
- Setting the different themes and theme colors
const vuetify = createVuetify({
locale: {
locale: 'en',
fallback: 'fr',
messages,
},
theme: {
defaultTheme: 'light',
themes: {
light: {
dark: false,
colors: {
surface: 'hsl(0, 0%, 98%)',
background: 'hsl(0, 0%, 100%)',
primary: 'hsl(200, 15%, 8%)',
secondary: 'hsl(0, 0%, 52%)',
},
},
dark: {
dark: true,
colors: {
background: 'hsl(207, 26%, 17%)',
surface: 'hsl(209, 23%, 22%)',
primary: 'hsl(0, 0%, 100%)',
},
}
}
}
});
- Using vuetify's internationalization for a user to toggle between different languages and toggle theme
<script setup lang="ts">
import { ref,watch } from 'vue'
import { useTheme, useLocale } from 'vuetify'
const darkMode = ref(false)
const theme = useTheme()
const { t, current } = useLocale()
// Watch for changes in darkMode and update the theme accordingly
watch(darkMode, (newVal) => {
theme.global.name.value = newVal ? 'dark' : 'light';
});
function changeLocale(locale: string) {
current.value = locale;
}
const languages = {
en: 'English',
fr: 'French',
};
- Use of Suspense
<v-container class="pt-8 mb-8 pt-md-12 mx-md-14 mx-lg-24">
<v-row class="d-flex justify-start pt-12">
<v-btn class="px-8 ml-4" prepend-icon="fa-solid fa-arrow-left" @click="goBack">
{{t('$vuetify.back')}}
</v-btn>
</v-row>
</v-container>
<Suspense>
<CountryDetail/>
<template #fallback>
<div class="d-flex mx-2 mx-md-12 pt-8">
<v-skeleton-loader
class="d-flex-column d-flex-md-row justify-space-between"
width="1600" type="card"
></v-skeleton-loader>
</div>
</template>
</Suspense>
- I would love to make more styling enhancements especially on loading states.
- A user to also be able to navigate to the details of the border countries under the country details page.
- Stack Overflow - This stackoverflow page helped me learn how to configure the font family in vuetify.
- Vuemastery - This is an amazing article which helped me finally understand suspense in Vue3 and how to navigate through async functions in my components.