Add Nuxt + Apollo example

examples/with-apollo/README.md

@@ -0,0 +1,29 @@
+# nuxt-with-apollo
+
+> Nuxt.js with Apollo (GraphQL client)
+
+[DEMO](https://nuxt-apollo.now.sh/)
+
+## About
+
+This project uses [Apollo](http://www.apollodata.com/) as a GraphQL client and [Graphcool](https://www.graph.cool/) as a hosted GraphQL backend.
+
+## Getting Started
+
+Download this example [or clone the repo](https://github.com/nuxt/nuxt.js):
+
+```bash
+curl https://codeload.github.com/nuxt/nuxt.js/tar.gz/master | tar -xz --strip=2 nuxt.js-master/examples/with-apollo
+cd with-apollo
+```
+
+Install and run:
+
+```bash
+npm install
+npm run dev
+
+# or with Yarn
+yarn
+yarn dev
+```

examples/with-apollo/layouts/default.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1 @click="$router.push('/')">Nuxt.js + Apollo</h1>
+    <nuxt/>
+  </div>
+</template>
+
+<style>
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  padding: 30px;
+}
+
+h1 {
+  cursor: pointer;
+}
+
+</style>

examples/with-apollo/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "nuxt-apollo",
+  "version": "1.0.0",
+  "description": "Nuxt.js with Apollo",
+  "author": "Charlie Hield",
+  "license": "MIT",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  },
+  "keywords": [
+    "nuxt",
+    "vue",
+    "apollo",
+    "graphql"
+  ],
+  "dependencies": {
+    "apollo-client": "^1.0.2",
+    "graphql-tag": "^2.0.0",
+    "isomorphic-fetch": "^2.2.1",
+    "nuxt": "^0.10.5"
+  }
+}

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

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h3>{{ car.make }} {{ car.model }}</h3>
+    <p>{{ formatCurrency(car.price) }}</p>
+    <img :src="car.photoURL" :alt="`${car.model} photo`">
+  </div>
+</template>
+
+<script>
+import client from '~plugins/apollo'
+import gql from 'graphql-tag'
+
+export default {
+
+  async asyncData({ params }) {
+    let { data } = await client.query({
+      query: gql`
+        query {
+          Car(id: "${params.id}") {
+            make
+            model
+            photoURL
+            price
+          }
+        }
+      `
+    })
+    return {
+      car: data.Car
+    }
+  },
+
+  methods: {
+    formatCurrency(num) {
+      const formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 2
+      })
+      return formatter.format(num)
+    }
+  }
+
+}
+</script>
+
+<style>
+
+img {
+  max-width: 600px;
+}
+
+</style>

examples/with-apollo/pages/index.vue

@@ -0,0 +1,59 @@
+<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>

examples/with-apollo/plugins/apollo.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import { ApolloClient, createNetworkInterface } from 'apollo-client'
+import 'isomorphic-fetch'
+
+// Created with Graphcool - https://www.graph.cool/
+const API_ENDPOINT = 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu'
+
+const apolloClient = new ApolloClient({
+  networkInterface: createNetworkInterface({
+    uri: API_ENDPOINT,
+    transportBatching: true
+  })
+})
+
+export default apolloClient