alexkasongo

<template>
  <div class="container">
    <div class="rounded border m-2">
      <h1 class="p-2 text-4xl font-semi-bold text-gray-800">
        Nuxt.js Querying a GraphQL API
      </h1>
      <div class="flex p-2" v-if="!$apollo.queries.characters.loading">
        <ul class="w-100 px-2 rounded border text-gray-600">
          <li
            v-for="character in characters.results"

alexkasongo

<template>
  <div
    v-if="!$apollo.queries.character.loading"
    class="rounded border bg-gray-900 ml-2 flex"
  >
    <img :src="character.image" :alt="character.name" class="p-2 rounded" />
    <div class="p-2">
      <span class="text-white">{{ character.status }}</span>
      <h1 class="text-white text-2xl font-semibold">{{ character.name }}</h1>
      <h1 class="text-white">{{ character.gender }}</h1>