<template> <div> <h3>Cars</h3> <ul> <li v-for="car in cars"> <nuxt-link :to="`car/${car.id}`"> {{ car.year }} {{ car.make }} {{ car.model }} </nuxt-link> </li> </ul> </div> </template> <script> import client from '~plugins/apollo' import gql from 'graphql-tag' export default { async asyncData() { let { data } = await client.query({ query: gql` query { allCars { id make model year } } ` }) return { cars: data.allCars } } } </script> <style> ul { list-style-type: none; margin: 0; padding: 0; line-height: 1.6; } a { text-decoration: none; color: #3498DB; } a:hover { border-bottom: 1px solid; } </style>