chore(#312): add wrappers example

examples/nuxt/wrappers/README.md

@@ -0,0 +1,10 @@
+# wrappers
+
+This directory contains exaples of how to use Wrapper components and the wrapper property.
+
+
+## Setup
+
+```
+yarn && yarn dev
+```

examples/nuxt/wrappers/components/druxt/entity/node/Page.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    This is a DruxtWrapper: DruxtEntityNodePage.vue
+  </div>
+</template>
+
+<script>
+export default {
+  druxt: {
+    query: {
+      schema: true
+    }
+  }
+}
+</script>

examples/nuxt/wrappers/nuxt.config.js

@@ -0,0 +1,3 @@
+export default {
+  buildModules: [['druxt-entity', { baseUrl: 'https://demo-api.druxtjs.org' }]]
+}

examples/nuxt/wrappers/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "wrappers",
+  "scripts": {
+    "dev": "nuxt dev"
+  },
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "druxt-entity": "link:../../../packages/druxt-entity",
+    "nuxt": "latest"
+  }
+}

examples/nuxt/wrappers/pages/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div v-if="!$fetchState.pending">
+    <details>
+      <summary><strong>Wrapper: default</strong></summary>
+      <DruxtEntity :type="type" :uuid="uuid" />
+    </details>
+
+    <details>
+      <summary><strong>Wrapper: false</strong></summary>
+      <DruxtEntity :type="type" :uuid="uuid" :wrapper="false" />
+    </details>
+
+    <details>
+      <summary><strong>Template injection / Wrapper: default</strong></summary>
+      <DruxtEntity :type="type" :uuid="uuid">
+        <template #default="{ entity }">
+          <pre><code>{{ JSON.stringify(entity, null, '  ') }}</code></pre>
+        </template>
+      </DruxtEntity>
+    </details>
+
+    <details>
+      <summary><strong>Template injection / Wrapper: true</strong></summary>
+      <DruxtEntity :type="type" :uuid="uuid" :wrapper="true">
+        <template #default="{ entity }">
+          <pre><code>{{ JSON.stringify(entity, null, '  ') }}</code></pre>
+        </template>
+      </DruxtEntity>
+    </details>
+  </div>
+
+  <div v-else>Loading...</div>
+</template>
+
+<script>
+import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
+
+export default {
+  async fetch() {
+    const query = new DrupalJsonApiParams().addPageLimit(1).addFields(this.type, ['id'])
+    this.uuid = (await this.$store.dispatch('druxt/getCollection', { type: this.type, query })).data[0].id
+  },
+
+  data: () => ({
+    uuid: null,
+    type: 'node--page'
+  })
+}
+</script>