Hi there.
Today I will share how I understood the Adapter Pattern using Vue.js. In short, the Adapter Pattern in Vue.js is used to “adapt” the interface of a component, method, or service so that it can be used in a compatible way with other parts of the code that expect a different interface.
This pattern is useful for integrating third-party components, APIs, or libraries that are not directly compatible with your Vue.js application, allowing for smoother, more flexible integration.
Here is an example:
1- I have a Home.vue file that will do a request to a random API (restcountries):
<script setup lang="ts">
async function getCountry(name: string) { const response = await useFetch(`https://restcountries.com/v3.1/name/${name}`) return response.data.value
} let country: any = await getCountry('brasil')
</script>
<template> <div> <pre> {{ country }} </pre> </div>
</template> Here is the return of the API request:
So, let’s imagine that we only need three variables from this response, formatted in a specific way:
interface Country { countryName: string countryCapital: string countryPopulation: number
}
2- I will create another file named adapters.ts and define a function to transform the current format into the one expected by the Country interface:
interface Country { countryName: string countryCapital: string countryPopulation: number
} // Function that receives the API response and adapts it to an array of Country objects
export function getCountryAdapter(apiResponse: any): Country[] { // Check if is an array if (!Array.isArray(apiResponse)) { throw new Error('The API response is not a Array of countries.') } // Maps each country in the response to the Country object format const countries: Country[] = apiResponse.map((country: any) => ({ countryName: country.name.common, countryCapital: country.capital[0], countryPopulation: country.population, })) return countries
} 3- Now, let’s call the adapter in the Home.vue file:
<script setup lang="ts">
import { getCountryAdapter } from '../services/adapters' async function getCountry(name: string) { const response = await useFetch(`https://restcountries.com/v3.1/name/${name}`) const country = getCountryAdapter(response.data.value) return country
} let country: any = await getCountry('brasil')
</script>
<template> <div> <pre> {{ country }} </pre> </div>
</template> 4- The final result is the response adapted to the interface 😊:
If you have any suggestions, please let me know. Thank you so much for reading!