Start adding unsplash code

package.json

@@ -11,6 +11,7 @@
     "deploy-dev": "npm run build-dev && .\\deploy.bat"
   },
   "dependencies": {
+    "unsplash-js": "^4.8.0",
     "vue": "^2.5.21"
   },
   "devDependencies": {
@@ -36,8 +37,8 @@
       "parser": "babel-eslint"
     },
     "globals": {
-        "CustomElement": false
-      }
+      "CustomElement": false
+    }
   },
   "postcss": {
     "plugins": {

src/App.vue

@@ -1,26 +1,63 @@
 /* global CustomElement */
 <template>
   <div id="app" v-if="loaded">
-    <input :disabled="element.disabled" v-model="element.value" placeholder="edit me">
-    <p>Saved: {{ value }}</p>
-    <p>AK: {{ element.config.accessKey }}</p>
-    <p>SK: {{ element.config.secretKey }}</p>
+    <input :disabled="element.disabled" v-model="searchTerm" placeholder="edit me">
+    <button @click="searchPhotos">Search</button>
+    <p>Saved: {{ value }} {{ height }}</p>
+    <pre v-html="searchResults"></pre>
   </div>
 </template>
 
 <script>
+import Unsplash, { toJson } from 'unsplash-js'
+
 export default {
   name: 'app',
   data: function () {
     return {
       loaded: false,
+      searchTerm: "",
+      searchResults: "",
+      height: "",
       element: {},
       configuration: {}
     }
   },
   computed: {
     value() {
       return this.element.value
+    },
+    unsplashInstance() {
+      return this.loaded
+        ? new Unsplash({
+            applicationId: this.element.config.accessKey,
+            secret: this.element.config.secretKey
+          })
+        : null
+    }
+  },
+  methods: {
+    searchPhotos() {
+      if(this.unsplashInstance && this.searchTerm) {
+        this.unsplashInstance.search.photos(this.searchTerm)
+        .then(toJson)
+        .then(json => {
+          this.searchResults = json
+        })
+      }
+    },
+    updateSize() {
+      // Update the custom element height in the Kentico UI.
+      const height = Math.max(
+        document.body.scrollHeight,
+        document.body.offsetHeight,
+        document.documentElement.clientHeight,
+        document.documentElement.scrollHeight,
+        document.documentElement.offsetHeight
+      )
+
+      this.height = height
+      CustomElement.setHeight(height);
     }
   },
   watch: {
@@ -32,15 +69,19 @@ export default {
   },
   created: function() {
     CustomElement.init((element, context) => {
-    // Set up the element with initial value
-    this.element = element
-    this.context = context
-    this.loaded = true
-    // console.log(element)
-    // console.log(context)
-})
+      // Set up the element with initial value
+      this.element = element
+      this.context = context
+      this.loaded = true
+      this.updateSize()
+    })
+  },
+  updated: function() {
+    this.updateSize()
   }
 }
+
+
 </script>
 
 <style>