Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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"
:key="character.id"
class="py-2"
>
<nuxt-link
:to="character.id"
class="w-full inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-black uppercase transition bg-gray-100 rounded shadow ripple hover:shadow-lg hover:bg-gray-200 focus:outline-none"
>
{{ character.name }}:
</nuxt-link>
</li>
</ul>
<div class="flex-grow min-h-full">
<nuxt-child :key="$route.params.id"></nuxt-child>
</div>
</div>
</div>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment