Draft for using vue-apollo (WIP)

examples/vue-apollo/README.md

@@ -0,0 +1,7 @@
+# WIP
+
+# Vue-Apollo with Nuxt.js
+
+https://nuxtjs.org/examples/vue-apollo
+
+https://github.com/Akryum/vue-apollo

examples/vue-apollo/middleware/apollo.js

@@ -0,0 +1,7 @@
+export default async function ({ isServer, apolloProvider }) {
+  if (isServer) {
+    const ensureReady = apolloProvider.collect()
+    console.log('Call ensureReady!', ensureReady())
+    await ensureReady()
+  }
+}

examples/vue-apollo/nuxt.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  build: {
+    vendor: ['vue-apollo', 'apollo-client']
+  },
+  router: {
+    middleware: 'apollo'
+  },
+  plugins: [
+    // Will inject the plugin in the $root app and also in the context as `i18n`
+    { src: '~plugins/apollo.js', injectAs: 'apolloProvider' }
+  ]
+}

examples/vue-apollo/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "nuxt-i18n",
+  "dependencies": {
+    "apollo-client": "^1.0.3",
+    "nuxt": "latest",
+    "vue-apollo": "^2.1.0-beta.2"
+  },
+  "scripts": {
+    "dev": "node server.js",
+    "build": "nuxt build",
+    "start": "cross-env NODE_ENV=production node server.js"
+  }
+}

examples/vue-apollo/pages/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <h3>Cars</h3>
+    <ul>
+      <li v-for="car in allCars">
+        <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 {
+  apollo: {
+    allCars: gql`
+      query {
+        allCars {
+          id
+          make
+          model
+          year
+        }
+      }
+    `
+  }
+}
+</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/vue-apollo/plugins/apollo.js

@@ -0,0 +1,21 @@
+import 'babel-polyfill'
+import Vue from 'vue'
+import VueApollo from 'vue-apollo'
+import { ApolloClient, createNetworkInterface } from 'apollo-client'
+
+Vue.use(VueApollo)
+
+const API_ENDPOINT = 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu'
+
+const apolloClient = new ApolloClient({
+  networkInterface: createNetworkInterface({
+    uri: API_ENDPOINT,
+    transportBatching: true
+  })
+})
+
+const apolloProvider = new VueApollo({
+  defaultClient: apolloClient
+})
+
+export default apolloProvider

examples/vue-apollo/server.js

@@ -0,0 +1,27 @@
+const Nuxt = require('../../')
+const app = require('express')()
+const host = process.env.HOST || '127.0.0.1'
+const port = process.env.PORT || 3000
+
+global.fetch = require('node-fetch')
+
+// Import and Set Nuxt.js options
+let config = require('./nuxt.config.js')
+config.dev = !(process.env.NODE_ENV === 'production')
+
+// Init Nuxt.js
+const nuxt = new Nuxt(config)
+app.use(nuxt.render)
+
+// Build only in dev mode
+if (config.dev) {
+  nuxt.build()
+  .catch((error) => {
+    console.error(error) // eslint-disable-line no-console
+    process.exit(1)
+  })
+}
+
+// Listen the server
+app.listen(port, host)
+console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console