Nuxt/examples/vue-apollo/pages/car/_id.vue

<template>
  <div v-if="Car">
    <h3>{{ Car.make }} {{ Car.model }}</h3>
    <p>{{ formatCurrency(Car.price) }}</p>
    <img :src="Car.photoURL" :alt="`${Car.model} photo`">
    <p>
      <NuxtLink to="/">
        Home page
      </NuxtLink>
    </p>
  </div>
</template>

<script>
import car from '~/apollo/queries/car'

export default {
  apollo: {
    Car: {
      query: car,
      prefetch: ({ route }) => ({ id: route.params.id }),
      variables() {
        return { id: this.$route.params.id }
      }
    }
  },
  methods: {
    formatCurrency(num) {
      const formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2
      })
      return formatter.format(num)
    }
  },
  head() {
    return {
      title: (this.Car ? `${this.Car.make} ${this.Car.model}` : 'Loading')
    }
  }
}
</script>

<style>
img {
  max-width: 600px;
}
</style>