Nuxt/examples/with-apollo/pages/index.vue
2017-04-11 13:15:31 -05:00

60 lines
806 B
Vue

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