A simple explanation of Adapter Pattern with Vue.js

#vue #designpatterns #beginners #vue3

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 😊: