druxt 0.11.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,104 @@
 # druxt
 
+## 0.15.0
+
+### Minor Changes
+
+- 2ae1d6d: Reduced Fetch based UI flicker in the DruxtModule
+
+## 0.14.0
+
+### Minor Changes
+
+- 85fff42: Added debug mode and Axios request logging.
+
+  ```
+  export default {
+    druxt: {
+      // Enable debug log messages.
+      debug: true,
+    }
+  }
+  ```
+
+- 39e2e2e: Added ability to render readable JSON with the DruxtDebug component
+
+  ```jsx
+  <DruxtDebug :json="{ data: [{ one: true, two: false }] }" />
+  ```
+
+- 9c33d82: Made summary prop optional on DruxtDebug component
+- 45bc0b9: Added Druxt version to Nuxt badge
+
+## 0.13.0
+
+### Minor Changes
+
+- 77ab204: Added ability to proxy the API
+
+  ```js
+  export default {
+    druxt: {
+      proxy: {
+        api: true
+      }
+    }
+  };
+  ```
+
+  Creates two proxy entries:
+
+  - The JSON:API: `${ENDPOINT}` -> `${BASEURL}${ENDPOINT}`
+  - The Decoupled Router:`/router/translate-path` -> `${BASEURL}/router/translate-path`
+
+- 77ab204: Added ability to proxy the Drupal file system
+
+  ```js
+  export default {
+    druxt: {
+      proxy: {
+        files: "default"
+      }
+    }
+  };
+  ```
+
+  Creates a proxy entry:
+
+  - `/sites/${PATH}/files` -> `${BASEURL}/site/${PATH}/files`
+
+- c4457e1: Changed template injected module components to not use a DruxtWrapper component by default.
+- e7b1533: Refactored DruxtModule fetch hooks
+
+## 0.12.0
+
+### Minor Changes
+
+- 897dcbc: Added createResource method to DruxtClient
+
+  ```js
+  this.$druxt.createResource({ type, attributes: {}, relationships: {} });
+  ```
+
+- 897dcbc: Added updateResource method to DruxtClient
+
+  ```js
+  await this.$druxt.updateResource({
+    type,
+    id,
+    attributes: {},
+    relationships: {}
+  });
+  ```
+
+- 4504a2f: Added getRelated() method
+
+  ```js
+  await this.$druxt.getRelated(type, id, related);
+  ```
+
+- e3e634c: Enabled Components auto-discovery by default
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/components/DruxtDebug.vue

@@ -1,6 +1,9 @@
 <template>
   <details v-if="$nuxt.context.isDev">
     <summary v-text="title" />
+    <pre v-if="json"><!--
+      --><code>{{ JSON.stringify(json, null, '  ') }}</code><!--
+    --></pre>
     <slot />
   </details>
 
@@ -10,19 +13,36 @@
 <script>
 
 /**
- * Debug component for use by Druxt modules.
+ * Renders Debug data only when Nuxt is in development mode.
+ *
+ * @example @lang vue
+ * <DruxtDebug :json="entity" />
  */
 export default {
   /** */
   props: {
     /**
-     * Text to display in summary.
+     * JSON data to format for readability.
+     *
+     * @type {*}
+     * @example @lang vue
+     * <DruxtDebug :json="{ data: [{ one: true, two: false }] }" />
+     */
+    json: {
+      type: [Array, Boolean, Object, Number, String],
+      default: undefined
+    },
+
+    /**
+     * Text to use for debug summary.
      *
      * @type {string}
+     * @example @lang vue
+     * <DruxtDebug summary="Foo bar" />
      */
     summary: {
       type: String,
-      required: true,
+      default: 'Debug',
     },
   },
 
@@ -43,7 +63,9 @@ export default {
      *
      * @return {string}
      */
-    title: ({ module, summary }) => `[${module.$options._componentTag}] ${summary}`,
+    title: ({ module, summary }) => module.$options._componentTag
+      ? `[${module.$options._componentTag}] ${summary}`
+      : summary,
   },
 };
 </script>

package/dist/components/DruxtModule.vue

@@ -38,12 +38,25 @@ export default {
       default: null,
     },
 
+    /**
+     * The wrapper component configuration.
+     *
+     * Used to set the wrapper component, class, style and propsData.
+     *
+     * @example
+     * <DruxtModule
+     *   :wrapper="{
+     *     component: 'MyWrapper',
+     *     class: 'wrapper',
+     *     propsData: { foo: 'bar' }
+     *   }"
+     * />
+     *
+     * @type {(Boolean|Object)}
+     */
     wrapper: {
-      type: Object,
-      default: () => ({
-        component: 'div',
-        propsData: {},
-      })
+      type: [Boolean, Object],
+      default: () => undefined
     },
   },
 
@@ -92,19 +105,44 @@ export default {
       return false
     }
 
+    // Fetch configuration.
+    if ((this.$options.druxt || {}).fetchConfig) {
+      await this.$options.druxt.fetchConfig.call(this)
+    }
+
     // Build wrapper component object.
-    const options = this.getModuleComponents()
+    let options = []
+    const hasDefaultTemplate = !!(this.$vnode.data.scopedSlots || {}).default
+    // Load wrapper components if:
+    if (
+      // No default template and wrapper isn't false OR
+      (!hasDefaultTemplate && this.wrapper !== false) ||
+      // Default tempalte and wrapper is set
+      (hasDefaultTemplate && this.wrapper)
+    ) {
+      options = this.getModuleComponents()
+    }
     let component = {
       is: (((options.filter(o => o.global) || [])[0] || {}).name || 'DruxtWrapper'),
       options: options.map(o => o.name) || [],
     }
 
-    // Get scoped slots.
-    component.slots = Object.keys(this.getScopedSlots())
-
     // Get wrapper data.
     const wrapperData = await this.getWrapperData(component.is)
+
+    // Build module settings.
     component.settings = wrapperData.druxt || {}
+    if ((this.$options.druxt || {}).settings) {
+      component.settings = this.$options.druxt.settings(this, component.settings)
+    }
+
+    // Fetch resource.
+    if ((this.$options.druxt || {}).fetchData) {
+      await this.$options.druxt.fetchData.call(this, component.settings)
+    }
+
+    // Get scoped slots.
+    component.slots = Object.keys(this.getScopedSlots())
 
     // Build wrapper component propsData.
     component = { ...component, ...this.getModulePropsData(wrapperData.props) }
@@ -140,12 +178,14 @@ export default {
      * @returns {Components}
      */
     getModuleComponents() {
+      // Ensure that the Druxt module component has `druxt.componentOptions`.
       if (!(this.$options.druxt || {}).componentOptions) {
         return []
       }
-
       const options = this.$options.druxt.componentOptions.call(this, this)
-      if (!options || !options.length) {
+
+      // Ensure that there available component options are returned.
+      if (!(options || []).length) {
         return []
       }
 
@@ -290,20 +330,27 @@ export default {
     const self = this
 
     const wrapperData = {
-      class: this.wrapper.class || undefined,
-      style: this.wrapper.style || undefined,
-      props: this.wrapper.propsData,
+      class: (this.wrapper || {}).class || undefined,
+      style: (this.wrapper || {}).style || undefined,
+      props: (this.wrapper || {}).propsData || undefined,
     }
 
     // Return only wrapper if fetch state is still pending.
-    if (this.$fetchState.pending) {
-      return h(this.wrapper.component, wrapperData)
+    if (this.$fetchState.pending && this.component.is === 'DruxtWrapper') {
+      return h((this.wrapper || {}).component || 'div', wrapperData)
     }
 
-    // Return wrapped component.
+    // Prepare attributes.
     const attrs = { ...this.component.$attrs, ...this.$attrs }
     delete attrs['data-fetch-key']
-    return h(this.wrapper.component, wrapperData, [
+
+    // Unwrap default template based component if required.
+    if ((this.$scopedSlots.default && !this.wrapper) || this.wrapper === false) {
+      this.component.is = 'DruxtWrapper'
+    }
+
+    // Return component.
+    return h((this.wrapper || {}).component || 'div', wrapperData, [
       h(this.component.is, {
         attrs,
         on: {

package/dist/druxt.esm.js

@@ -2,17 +2,123 @@ import chalk from 'chalk';
 import { join, resolve } from 'path';
 import axios from 'axios';
 import { stringify } from 'querystring';
+import consola from 'consola';
 import merge from 'deepmerge';
 import md5 from 'md5';
 import Vue from 'vue';
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
 
+var name = "druxt";
+var version = "0.15.0";
+var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
+var keywords = [
+	"cms",
+	"decoupled",
+	"drupal",
+	"druxt",
+	"headless",
+	"jsonapi",
+	"json:api",
+	"nuxt",
+	"module",
+	"vue"
+];
+var homepage = "https://druxtjs.org";
+var bugs = {
+	url: "https://github.com/druxt/druxt.js/issues"
+};
+var repository = {
+	type: "git",
+	url: "git+https://github.com/druxt/druxt.js"
+};
+var license = "MIT";
+var exports = {
+	".": {
+		require: "./dist/druxt.ssr.js",
+		"import": "./dist/druxt.esm.js"
+	},
+	"./components/*": "./dist/components/*"
+};
+var main = "dist/druxt.ssr.js";
+var module = "dist/druxt.esm.js";
+var files = [
+	"dist",
+	"templates"
+];
+var dependencies = {
+	"@nuxtjs/proxy": "^2.1.0",
+	axios: "^0.21.1",
+	chalk: "^4.1.2",
+	deepmerge: "^4.2.2",
+	"drupal-jsonapi-params": "^1.2.1",
+	md5: "^2.3.0",
+	querystring: "^0.2.0",
+	scule: "^0.2.0"
+};
+var peerDependencies = {
+	consola: "*"
+};
+var optionalDependencies = {
+	"core-js": "^3.16.1",
+	vue: "^2.6.14",
+	vuex: "^3.6.2"
+};
+var publishConfig = {
+	access: "public"
+};
+var meta = {
+	name: name,
+	version: version,
+	description: description,
+	keywords: keywords,
+	homepage: homepage,
+	bugs: bugs,
+	repository: repository,
+	license: license,
+	exports: exports,
+	main: main,
+	module: module,
+	files: files,
+	dependencies: dependencies,
+	peerDependencies: peerDependencies,
+	optionalDependencies: optionalDependencies,
+	publishConfig: publishConfig
+};
+
 const DruxtNuxtModule = function(moduleOptions = {}) {
+  var _a;
   const options = {
     endpoint: "/jsonapi",
     ...moduleOptions,
     ...(this.options || {}).druxt
   };
+  if (options.proxy) {
+    const proxies = {};
+    if ((options.proxy || {}).api) {
+      proxies[options.endpoint] = options.baseUrl;
+      proxies["/router/translate-path"] = options.baseUrl;
+    }
+    if ((options.proxy || {}).files) {
+      const filesPath = typeof options.proxy.files === "string" ? options.proxy.files : "default";
+      proxies[`/sites/${filesPath}/files`] = options.baseUrl;
+    }
+    if (this.options.proxy) {
+      if (Array.isArray(this.options.proxy)) {
+        this.options.proxy = [
+          ...Object.keys(proxies).map((path) => `${options.baseUrl}${path}`),
+          ...this.options.proxy
+        ];
+      } else {
+        this.options.proxy = {
+          ...proxies,
+          ...this.options.proxy
+        };
+      }
+    } else {
+      this.options.proxy = proxies;
+    }
+    this.addModule("@nuxtjs/proxy");
+  }
   this.nuxt.hook("components:dirs", (dirs) => {
     dirs.push({ path: join(__dirname, "components") });
   });
@@ -27,20 +133,38 @@ const DruxtNuxtModule = function(moduleOptions = {}) {
     options
   });
   this.options.store = true;
-  this.options.cli.badgeMessages.push(`${chalk.bold("Druxt API:")} ${chalk.blue.underline(options.baseUrl + options.endpoint)}`);
+  this.options.components = (_a = this.options.components) != null ? _a : true;
+  this.options.cli.badgeMessages.push(`${chalk.blue.bold("Druxt")} @ v${meta.version}`);
+  this.options.cli.badgeMessages.push(`${chalk.bold("API:")} ${chalk.blue.underline(options.baseUrl + options.endpoint)}`);
 };
-DruxtNuxtModule.meta = require("../package.json");
+DruxtNuxtModule.meta = meta;
 
 class DruxtClient {
   constructor(baseUrl, options = {}) {
+    this.log = consola.create({ defaults: {
+      tag: "DruxtClient"
+    } });
     if (!baseUrl) {
       throw new Error("The 'baseUrl' parameter is required.");
     }
-    let axiosSettings = { baseURL: baseUrl };
+    let axiosSettings = {};
+    if (baseUrl && !(options.proxy || {}).api) {
+      axiosSettings.baseURL = baseUrl;
+    }
     if (typeof options.axios === "object") {
       axiosSettings = Object.assign(axiosSettings, options.axios);
     }
     this.axios = axios.create(axiosSettings);
+    if (options.debug) {
+      const log = this.log;
+      this.axios.interceptors.request.use((config) => {
+        log.info(config.url);
+        return config;
+      }, (error) => {
+        log.error(error);
+        return Promise.reject(error);
+      });
+    }
     this.options = {
       endpoint: "/jsonapi",
       jsonapiResourceConfig: "jsonapi_resource_config--jsonapi_resource_config",
@@ -88,6 +212,26 @@ class DruxtClient {
       }
     }
   }
+  async createResource(resource) {
+    if (resource.id) {
+      return this.updateResource(resource);
+    }
+    const { href } = await this.getIndex(resource.type);
+    if (!href) {
+      return false;
+    }
+    let response;
+    try {
+      response = await this.axios.post(href, { data: resource }, {
+        headers: {
+          "Content-Type": "application/vnd.api+json"
+        }
+      });
+    } catch (err) {
+      response = (err.response || {}).data || err.message;
+    }
+    return response;
+  }
   async getCollection(type, query) {
     const { href } = await this.getIndex(type);
     if (!href) {
@@ -116,10 +260,14 @@ class DruxtClient {
     if (this.index && resource) {
       return this.index[resource] ? this.index[resource] : false;
     }
-    const index = await this.axios.get(this.options.endpoint);
-    this.index = index.data.links;
-    if (this.index[this.options.jsonapiResourceConfig]) {
-      const resources = await this.axios.get(this.index[this.options.jsonapiResourceConfig].href);
+    let index = ((await this.axios.get(this.options.endpoint) || {}).data || {}).links;
+    const baseUrl = this.options.baseUrl;
+    index = Object.fromEntries(Object.entries(index).map(([key, value]) => {
+      value.href = value.href.replace(baseUrl, "");
+      return [key, value];
+    }));
+    if (index[this.options.jsonapiResourceConfig]) {
+      const resources = await this.axios.get(index[this.options.jsonapiResourceConfig].href);
       for (const resourceType in resources.data.data) {
         const resource2 = resources.data.data[resourceType];
         const internal = resource2.attributes.drupal_internal__id.split("--");
@@ -130,17 +278,35 @@ class DruxtClient {
           resourceFields: resource2.attributes.resourceFields
         };
         const id = [item.entityType, item.bundle].join("--");
-        this.index[id] = {
+        index[id] = {
           ...item,
-          ...this.index[id]
+          ...index[id]
         };
       }
     }
+    this.index = index;
     if (resource) {
-      return this.index[resource] ? this.index[resource] : false;
+      const response = this.index[resource] ? this.index[resource] : false;
+      return response;
     }
     return this.index;
   }
+  async getRelated(type, id, related, query) {
+    if (!id || !type || !related) {
+      return false;
+    }
+    let { href } = await this.getIndex(type);
+    if (!href) {
+      href = this.options.endpoint + "/" + type.replace("--", "/");
+    }
+    const url = this.buildQueryUrl(`${href}/${id}/${related}`, query);
+    try {
+      const related2 = await this.axios.get(url);
+      return related2.data;
+    } catch (e) {
+      return false;
+    }
+  }
   async getResource(type, id, query) {
     if (!id || !type) {
       return false;
@@ -157,6 +323,24 @@ class DruxtClient {
       return false;
     }
   }
+  async updateResource(resource) {
+    const { href } = await this.getIndex(resource.type);
+    if (!href) {
+      return false;
+    }
+    const url = [href, resource.id].join("/");
+    let response;
+    try {
+      response = await this.axios.patch(url, { data: resource }, {
+        headers: {
+          "Content-Type": "application/vnd.api+json"
+        }
+      });
+    } catch (err) {
+      response = (err.response || {}).data || err.message;
+    }
+    return response;
+  }
 }
 
 const getDrupalJsonApiParams = (query) => {

package/dist/druxt.ssr.js

@@ -6,6 +6,7 @@ const chalk = require('chalk');
 const path = require('path');
 const axios = require('axios');
 const querystring = require('querystring');
+const consola = require('consola');
 const merge = require('deepmerge');
 const md5 = require('md5');
 const Vue = require('vue');
@@ -15,16 +16,122 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 const chalk__default = /*#__PURE__*/_interopDefaultLegacy(chalk);
 const axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+const consola__default = /*#__PURE__*/_interopDefaultLegacy(consola);
 const merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 const md5__default = /*#__PURE__*/_interopDefaultLegacy(md5);
 const Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
 
+var name = "druxt";
+var version = "0.15.0";
+var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
+var keywords = [
+	"cms",
+	"decoupled",
+	"drupal",
+	"druxt",
+	"headless",
+	"jsonapi",
+	"json:api",
+	"nuxt",
+	"module",
+	"vue"
+];
+var homepage = "https://druxtjs.org";
+var bugs = {
+	url: "https://github.com/druxt/druxt.js/issues"
+};
+var repository = {
+	type: "git",
+	url: "git+https://github.com/druxt/druxt.js"
+};
+var license = "MIT";
+var exports$1 = {
+	".": {
+		require: "./dist/druxt.ssr.js",
+		"import": "./dist/druxt.esm.js"
+	},
+	"./components/*": "./dist/components/*"
+};
+var main = "dist/druxt.ssr.js";
+var module$1 = "dist/druxt.esm.js";
+var files = [
+	"dist",
+	"templates"
+];
+var dependencies = {
+	"@nuxtjs/proxy": "^2.1.0",
+	axios: "^0.21.1",
+	chalk: "^4.1.2",
+	deepmerge: "^4.2.2",
+	"drupal-jsonapi-params": "^1.2.1",
+	md5: "^2.3.0",
+	querystring: "^0.2.0",
+	scule: "^0.2.0"
+};
+var peerDependencies = {
+	consola: "*"
+};
+var optionalDependencies = {
+	"core-js": "^3.16.1",
+	vue: "^2.6.14",
+	vuex: "^3.6.2"
+};
+var publishConfig = {
+	access: "public"
+};
+const meta = {
+	name: name,
+	version: version,
+	description: description,
+	keywords: keywords,
+	homepage: homepage,
+	bugs: bugs,
+	repository: repository,
+	license: license,
+	exports: exports$1,
+	main: main,
+	module: module$1,
+	files: files,
+	dependencies: dependencies,
+	peerDependencies: peerDependencies,
+	optionalDependencies: optionalDependencies,
+	publishConfig: publishConfig
+};
+
 const DruxtNuxtModule = function(moduleOptions = {}) {
+  var _a;
   const options = {
     endpoint: "/jsonapi",
     ...moduleOptions,
     ...(this.options || {}).druxt
   };
+  if (options.proxy) {
+    const proxies = {};
+    if ((options.proxy || {}).api) {
+      proxies[options.endpoint] = options.baseUrl;
+      proxies["/router/translate-path"] = options.baseUrl;
+    }
+    if ((options.proxy || {}).files) {
+      const filesPath = typeof options.proxy.files === "string" ? options.proxy.files : "default";
+      proxies[`/sites/${filesPath}/files`] = options.baseUrl;
+    }
+    if (this.options.proxy) {
+      if (Array.isArray(this.options.proxy)) {
+        this.options.proxy = [
+          ...Object.keys(proxies).map((path) => `${options.baseUrl}${path}`),
+          ...this.options.proxy
+        ];
+      } else {
+        this.options.proxy = {
+          ...proxies,
+          ...this.options.proxy
+        };
+      }
+    } else {
+      this.options.proxy = proxies;
+    }
+    this.addModule("@nuxtjs/proxy");
+  }
   this.nuxt.hook("components:dirs", (dirs) => {
     dirs.push({ path: path.join(__dirname, "components") });
   });
@@ -39,20 +146,38 @@ const DruxtNuxtModule = function(moduleOptions = {}) {
     options
   });
   this.options.store = true;
-  this.options.cli.badgeMessages.push(`${chalk__default['default'].bold("Druxt API:")} ${chalk__default['default'].blue.underline(options.baseUrl + options.endpoint)}`);
+  this.options.components = (_a = this.options.components) != null ? _a : true;
+  this.options.cli.badgeMessages.push(`${chalk__default['default'].blue.bold("Druxt")} @ v${meta.version}`);
+  this.options.cli.badgeMessages.push(`${chalk__default['default'].bold("API:")} ${chalk__default['default'].blue.underline(options.baseUrl + options.endpoint)}`);
 };
-DruxtNuxtModule.meta = require("../package.json");
+DruxtNuxtModule.meta = meta;
 
 class DruxtClient {
   constructor(baseUrl, options = {}) {
+    this.log = consola__default['default'].create({ defaults: {
+      tag: "DruxtClient"
+    } });
     if (!baseUrl) {
       throw new Error("The 'baseUrl' parameter is required.");
     }
-    let axiosSettings = { baseURL: baseUrl };
+    let axiosSettings = {};
+    if (baseUrl && !(options.proxy || {}).api) {
+      axiosSettings.baseURL = baseUrl;
+    }
     if (typeof options.axios === "object") {
       axiosSettings = Object.assign(axiosSettings, options.axios);
     }
     this.axios = axios__default['default'].create(axiosSettings);
+    if (options.debug) {
+      const log = this.log;
+      this.axios.interceptors.request.use((config) => {
+        log.info(config.url);
+        return config;
+      }, (error) => {
+        log.error(error);
+        return Promise.reject(error);
+      });
+    }
     this.options = {
       endpoint: "/jsonapi",
       jsonapiResourceConfig: "jsonapi_resource_config--jsonapi_resource_config",
@@ -100,6 +225,26 @@ class DruxtClient {
       }
     }
   }
+  async createResource(resource) {
+    if (resource.id) {
+      return this.updateResource(resource);
+    }
+    const { href } = await this.getIndex(resource.type);
+    if (!href) {
+      return false;
+    }
+    let response;
+    try {
+      response = await this.axios.post(href, { data: resource }, {
+        headers: {
+          "Content-Type": "application/vnd.api+json"
+        }
+      });
+    } catch (err) {
+      response = (err.response || {}).data || err.message;
+    }
+    return response;
+  }
   async getCollection(type, query) {
     const { href } = await this.getIndex(type);
     if (!href) {
@@ -128,10 +273,14 @@ class DruxtClient {
     if (this.index && resource) {
       return this.index[resource] ? this.index[resource] : false;
     }
-    const index = await this.axios.get(this.options.endpoint);
-    this.index = index.data.links;
-    if (this.index[this.options.jsonapiResourceConfig]) {
-      const resources = await this.axios.get(this.index[this.options.jsonapiResourceConfig].href);
+    let index = ((await this.axios.get(this.options.endpoint) || {}).data || {}).links;
+    const baseUrl = this.options.baseUrl;
+    index = Object.fromEntries(Object.entries(index).map(([key, value]) => {
+      value.href = value.href.replace(baseUrl, "");
+      return [key, value];
+    }));
+    if (index[this.options.jsonapiResourceConfig]) {
+      const resources = await this.axios.get(index[this.options.jsonapiResourceConfig].href);
       for (const resourceType in resources.data.data) {
         const resource2 = resources.data.data[resourceType];
         const internal = resource2.attributes.drupal_internal__id.split("--");
@@ -142,17 +291,35 @@ class DruxtClient {
           resourceFields: resource2.attributes.resourceFields
         };
         const id = [item.entityType, item.bundle].join("--");
-        this.index[id] = {
+        index[id] = {
           ...item,
-          ...this.index[id]
+          ...index[id]
         };
       }
     }
+    this.index = index;
     if (resource) {
-      return this.index[resource] ? this.index[resource] : false;
+      const response = this.index[resource] ? this.index[resource] : false;
+      return response;
     }
     return this.index;
   }
+  async getRelated(type, id, related, query) {
+    if (!id || !type || !related) {
+      return false;
+    }
+    let { href } = await this.getIndex(type);
+    if (!href) {
+      href = this.options.endpoint + "/" + type.replace("--", "/");
+    }
+    const url = this.buildQueryUrl(`${href}/${id}/${related}`, query);
+    try {
+      const related2 = await this.axios.get(url);
+      return related2.data;
+    } catch (e) {
+      return false;
+    }
+  }
   async getResource(type, id, query) {
     if (!id || !type) {
       return false;
@@ -169,6 +336,24 @@ class DruxtClient {
       return false;
     }
   }
+  async updateResource(resource) {
+    const { href } = await this.getIndex(resource.type);
+    if (!href) {
+      return false;
+    }
+    const url = [href, resource.id].join("/");
+    let response;
+    try {
+      response = await this.axios.patch(url, { data: resource }, {
+        headers: {
+          "Content-Type": "application/vnd.api+json"
+        }
+      });
+    } catch (err) {
+      response = (err.response || {}).data || err.message;
+    }
+    return response;
+  }
 }
 
 const getDrupalJsonApiParams = (query) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt",
-  "version": "0.11.0",
+  "version": "0.15.0",
   "description": "The Fully Decoupled Drupal Framework for Nuxt.js.",
   "keywords": [
     "cms",
@@ -37,6 +37,7 @@
     "templates"
   ],
   "dependencies": {
+    "@nuxtjs/proxy": "^2.1.0",
     "axios": "^0.21.1",
     "chalk": "^4.1.2",
     "deepmerge": "^4.2.2",
@@ -45,6 +46,9 @@
     "querystring": "^0.2.0",
     "scule": "^0.2.0"
   },
+  "peerDependencies": {
+    "consola": "*"
+  },
   "optionalDependencies": {
     "core-js": "^3.16.1",
     "vue": "^2.6.14",

package/templates/plugin.js

@@ -1,7 +1,12 @@
 import { DruxtClient } from 'druxt'
 
 export default (context, inject) => {
-  const options = <%= devalue(options) %>
+  const options = <%= JSON.stringify(options) %>
+
+  // Disable the proxy for server side requests.
+  if (!process.client && (options.proxy || {}).api) {
+    options.proxy.api = false
+  }
 
   const druxt = new DruxtClient(options.baseUrl, options)
   druxt.settings = options