Add experimental support for Nuxt.js

Author: carlobeltrame

CHANGELOG.md

@@ -1,5 +1,7 @@
 ### Unreleased
 
+### 1.1.0
+- Add experimental support for using the plugin in Nuxt.js applications
 
 ### 1.0.0
 - Created the library by extracting code from https://github.com/ecamp/ecamp3

README.md

@@ -60,6 +60,48 @@ this.api.reload(someEntity)
 <li v-for="book in api.get('/all/my/books').items" :key="book._meta.self">...</li>
 ```
 
+### Nuxt.js (experimental support)
+To install in a Nuxt.js application:
+```js
+// First, make sure the Nuxt.js app uses Vuex, by adding an index.js to your store/ directory.
+
+// Then, create a file plugins/hal-json-vuex.js with the following content:
+import Vue from 'vue'
+import HalJsonVuex from 'hal-json-vuex'
+
+export default function ({ store, $axios }, nuxtInject) {
+  if (!Vue.$api) {
+    Vue.use(HalJsonVuex(store, $axios, { nuxtInject }))
+  }
+}
+
+// Add the plugin to nuxt.config.js:
+export default {
+  plugins: [
+    { src: '~/plugins/hal-json-vuex.js' }
+  ],
+  // ...
+}
+```
+Then, you can use `$api` on both the server side and the client side:
+```js
+// On the server
+async asyncData({ $api }) {
+  const books = await $api.get().books()._meta.load
+  return { books }
+}
+```
+
+```js
+// On the client, in a computed or method or lifecycle hook of a Vue component
+let someEntity = this.$api.get('/some/endpoint')
+```
+
+```html
+<!-- On the client, in the <template> part of a Vue component -->
+<li v-for="book in $api.get('/all/my/books').items" :key="book._meta.self">...</li>
+```
+
 # Available options
 
 ### apiName

src/index.js

@@ -34,14 +34,31 @@ export class ServerException extends Error {
 function HalJsonVuex (store, axios, options) {
   const defaultOptions = {
     forceRequestedSelfLink: false,
-    apiName: 'api'
+    apiName: 'api',
+    nuxtInject: null
   }
   const opts = { ...defaultOptions, ...options }
 
   store.registerModule(opts.apiName, { state: {}, ...storeModule })
 
   const storeValueProxy = StoreValueProxyCreator(axios.defaults.baseURL, get)
 
+  if (opts.nuxtInject !== null) axios = adaptNuxtAxios(axios)
+
+  /**
+   * Since Nuxt.js uses $get, $post etc., we need to use an adapter in the case of a Nuxt.js app...
+   * @param $axios
+   */
+  function adaptNuxtAxios ($axios) {
+    return {
+      get: $axios.$get,
+      patch: $axios.$patch,
+      post: $axios.$post,
+      delete: $axios.$delete,
+      ...$axios
+    }
+  }
+
   /**
    * Sends a POST request to the backend, in order to create a new entity. Note that this does not
    * reload any collections that this new entity might be in, the caller has to do that on its own.
@@ -417,13 +434,21 @@ function HalJsonVuex (store, axios, options) {
   const halJsonVuex = { post, get, reload, del, patch, purge, purgeAll, href }
 
   function install (Vue) {
-    Object.defineProperties(Vue.prototype, {
-      [opts.apiName]: {
-        get () {
-          return halJsonVuex
+    if (this.installed) return
+
+    if (opts.nuxtInject === null) {
+      // Normal installation in a Vue app
+      Object.defineProperties(Vue.prototype, {
+        [opts.apiName]: {
+          get () {
+            return halJsonVuex
+          }
         }
-      }
-    })
+      })
+    } else {
+      // Support for Nuxt-style inject installation
+      opts.nuxtInject(opts.apiName, halJsonVuex)
+    }
   }
 
   return { ...halJsonVuex, install }