diff --git a/openflexure_microscope/api/example_extensions/custom_element/static/package-lock.json b/openflexure_microscope/api/example_extensions/custom_element/static/package-lock.json
index ec7685c4..d5756ff4 100644
--- a/openflexure_microscope/api/example_extensions/custom_element/static/package-lock.json
+++ b/openflexure_microscope/api/example_extensions/custom_element/static/package-lock.json
@@ -4722,7 +4722,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5146,7 +5147,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5202,6 +5204,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5245,12 +5248,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/openflexure_microscope/api/example_extensions/custom_element/static/package.json b/openflexure_microscope/api/example_extensions/custom_element/static/package.json
index e04311f6..7113247b 100644
--- a/openflexure_microscope/api/example_extensions/custom_element/static/package.json
+++ b/openflexure_microscope/api/example_extensions/custom_element/static/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --target wc --inline-vue --name my-custom-element ./src/components/VueWebComponent.vue"
   },
   "dependencies": {
diff --git a/openflexure_microscope/api/example_extensions/custom_element/static/src/App.vue b/openflexure_microscope/api/example_extensions/custom_element/static/src/App.vue
new file mode 100644
index 00000000..0e00a291
--- /dev/null
+++ b/openflexure_microscope/api/example_extensions/custom_element/static/src/App.vue
@@ -0,0 +1,18 @@
+<template>
+  <div id="app">
+    <VueWebComponent/>
+  </div>
+</template>
+
+<script>
+import VueWebComponent from './components/VueWebComponent.vue'
+export default {
+  name: 'app',
+  components: {
+    VueWebComponent
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/openflexure_microscope/api/example_extensions/custom_element/static/src/components/VueWebComponent.vue b/openflexure_microscope/api/example_extensions/custom_element/static/src/components/VueWebComponent.vue
index e4512840..fd258e78 100644
--- a/openflexure_microscope/api/example_extensions/custom_element/static/src/components/VueWebComponent.vue
+++ b/openflexure_microscope/api/example_extensions/custom_element/static/src/components/VueWebComponent.vue
@@ -20,7 +20,7 @@ export default {
   props: {
     'componentBaseURL': {
       required: false,
-      default: null,
+      default: "http://localhost/api/v2",
       type: String
     }
   },
diff --git a/openflexure_microscope/api/example_extensions/custom_element/static/src/main.js b/openflexure_microscope/api/example_extensions/custom_element/static/src/main.js
index e9e54c9b..db696473 100644
--- a/openflexure_microscope/api/example_extensions/custom_element/static/src/main.js
+++ b/openflexure_microscope/api/example_extensions/custom_element/static/src/main.js
@@ -1,7 +1,14 @@
 import Vue from 'vue';
 import wrap from '@vue/web-component-wrapper';
+import App from './App.vue';
 import VueWebComponent from './components/VueWebComponent';
 
 const CustomElement = wrap(Vue, VueWebComponent);
 
-window.customElements.define('my-custom-element', CustomElement);
\ No newline at end of file
+window.customElements.define('my-custom-element', CustomElement);
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
\ No newline at end of file