integrate contentful-wizard

components/article-preview.vue

@@ -19,8 +19,20 @@
 </template>
 
 <script>
+import { attach } from 'contentful-wizard'
 export default {
-  props: ['post']
+  props: ['post'],
+  mounted: function () {
+    this.cleanup = attach({
+      node: this.$el,
+      spaceId: this.post.sys.space.sys.id,
+      contentType: this.post.sys.contentType.sys.id,
+      entry: this.post.sys.id
+    })
+  },
+  destroyed: function () {
+    this.cleanup && this.cleanup()
+  }
 }
 </script>
 

nuxt.config.js

@@ -65,7 +65,8 @@ const config = {
   ** Make client available everywhere via Nuxt plugins
   */
   plugins: [
-    '~/plugins/contentful'
+    '~/plugins/contentful',
+    '~/plugins/contentful-wizard'
   ],
 
   /*

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "contentful": "^4.3.0",
     "contentful-management": "^3.4.0",
+    "contentful-wizard": "0.0.1-alpha-6",
     "nuxt": "^1.0.0-rc4",
     "vue-markdown": "^2.1.3"
   },

pages/blog/_slug.vue

@@ -7,7 +7,7 @@
           <Navigation></Navigation>
         </div>
       </div>
-      <div>
+      <div data-value="asset">
         <img
           :src="post.fields.heroImage.fields.file.url + '?fit=scale&w=350&h=196'"
           :srcset="`${post.fields.heroImage.fields.file.url}?w=350&h=87&fit=fill 350w, ${post.fields.heroImage.fields.file.url}?w=1000&h=250&fit=fill 1000w, ${post.fields.heroImage.fields.file.url}?w=2000&h=500&fit=fill 2000w`"
@@ -17,7 +17,7 @@
       </div>
     </header>
 
-    <section class="body-container">
+    <section class="body-container" data-value="content">
       <main class="wrapper">
         <div class="headline">
           <time class="tiny">{{ ( new Date(post.fields.publishDate)).toDateString() }}</time>
@@ -36,6 +36,7 @@
 import VueMarkdown from 'vue-markdown'
 import {createClient} from '~/plugins/contentful.js'
 import Navigation from '~/components/navigation.vue'
+import {attach} from 'contentful-wizard'
 
 const client = createClient()
 
@@ -51,6 +52,32 @@ export default {
     })
     .catch(console.error)
   },
+  mounted: function () {
+    const assetNode = this.$el.querySelector('[data-value="asset"]')
+
+    if (assetNode) {
+      this.cleanupAsset = attach({
+        node: assetNode,
+        spaceId: this.post.fields.heroImage.sys.space.sys.id,
+        asset: this.post.fields.heroImage.sys.id
+      })
+    }
+
+    const contentNode = this.$el.querySelector('[data-value="content"]')
+
+    if (contentNode) {
+      this.cleanupContent = attach({
+        node: contentNode,
+        spaceId: this.post.sys.space.sys.id,
+        contentType: this.post.sys.contentType.sys.id,
+        entry: this.post.sys.id
+      })
+    }
+  },
+  destroyed: function () {
+    this.cleanupAsset && this.cleanupAsset()
+    this.cleanupContent && this.cleanupContent()
+  },
   components: {
     Navigation,
     VueMarkdown

pages/index.vue

@@ -9,7 +9,7 @@
           <a href="/" class="person-name">{{ person.fields.name }}</a>
           <Navigation></Navigation>
         </div>
-        <div class="page-info wrapper">
+        <div class="page-info wrapper" data-value="profile">
           <h2>{{ person.fields.title }}</h2>
           <p>{{ person.fields.shortBio }}</p>
           <ul class="social-icons">
@@ -51,6 +51,7 @@
 import {createClient} from '~/plugins/contentful.js'
 import Navigation from '~/components/navigation.vue'
 import ArticlePreview from '~/components/article-preview.vue'
+import { attach } from 'contentful-wizard'
 
 const client = createClient()
 
@@ -65,12 +66,28 @@ export default {
         order: '-sys.createdAt'
       })
     ]).then(([entries, posts]) => {
+      // console.log(entries.items[0], this)
       return {
         person: entries.items[0],
         posts: posts.items
       }
     }).catch(console.error)
   },
+  mounted: function () {
+    const node = this.$el.querySelector('[data-value="profile"]')
+
+    if (node) {
+      this.cleanup = attach({
+        node,
+        spaceId: this.person.sys.space.sys.id,
+        contentType: this.person.sys.contentType.sys.id,
+        entry: this.person.sys.id
+      })
+    }
+  },
+  destroyed: function () {
+    this.cleanup && this.cleanup()
+  },
   components: {
     Navigation,
     ArticlePreview

plugins/contentful-wizard.js

@@ -0,0 +1,6 @@
+const { init } = require('contentful-wizard')
+
+init({
+  key: 'CDA_KEY',
+  spaceId: 'SPACE_ID'
+})