chore(#1): update frontend example

example/nuxt/components/druxt/layout-builder/component/ExtraFieldBlock.vue

@@ -0,0 +1,26 @@
+<template>
+  <div v-if="field === 'links'">
+    @TODO - Node page links
+  </div>
+  <div v-else />
+</template>
+
+<script>
+export default {
+  props: {
+    entity: {
+      type: Object,
+      required: true,
+    },
+
+    item: {
+      type: Object,
+      required: true,
+    }
+  },
+
+  computed: {
+    field: ({ item }) => item.configuration.id.split(':').pop(),
+  }
+}
+</script>

example/nuxt/components/druxt/layout-builder/component/FieldBlock.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-html="html" />
+</template>
+
+<script>
+export default {
+  props: {
+    entity: {
+      type: Object,
+      required: true,
+    },
+
+    item: {
+      type: Object,
+      required: true,
+    }
+  },
+
+  computed: {
+    field: ({ item }) => item.configuration.id.split(':').pop(),
+    html: ({ entity, field }) => {
+      if (!entity.attributes[field]) return undefined
+      if (typeof entity.attributes[field] === 'string') return entity.attributes[field]
+      if (typeof entity.attributes[field] === 'object' && entity.attributes[field].processed) return entity.attributes[field].processed
+      return undefined
+    }
+  }
+}
+</script>

example/nuxt/nuxt.config.js

@@ -8,5 +8,6 @@ export default {
     'druxt-router/nuxt',
     '@druxt-contrib/layout-builder'
   ],
+  components: true,
   druxt: { baseUrl }
 }

example/nuxt/pages/index.vue

@@ -1,11 +1,27 @@
 <template>
   <DruxtRouter path="/node/1">
     <template #default="{ route }">
-      <DruxtEntity v-bind="route.props">
-        <template #default="{ entity }">
-          <DruxtLayoutBuilder :entity="entity" />
-        </template>
-      </DruxtEntity>
+      <h1>@druxt-contrib/layout-builder module example:</h1>
+      <details open>
+        <summary>&lt;DruxtLayoutBulder :entity="entity" /&gt;</summary>
+        <DruxtEntity v-bind="route.props">
+          <template #default="{ entity }">
+            <DruxtLayoutBuilder :entity="entity" />
+          </template>
+        </DruxtEntity>
+      </details>
     </template>
   </DruxtRouter>
 </template>
+
+<style scoped>
+details {
+  border: 1px dashed lightgrey;
+  padding: 1rem;
+}
+
+summary {
+  font-weight: bold;
+  margin-bottom: 2rem;
+}
+</style>