+
+
+
+
+
\ No newline at end of file
diff --git a/openflexure_microscope/api/extra_extensions/medscan/static/src/components/VueWebComponent.vue b/openflexure_microscope/api/extra_extensions/medscan/static/src/components/VueWebComponent.vue
new file mode 100644
index 00000000..6cc87fd4
--- /dev/null
+++ b/openflexure_microscope/api/extra_extensions/medscan/static/src/components/VueWebComponent.vue
@@ -0,0 +1,133 @@
+
+
+
Sample Scan Wizard
+
Base URL: {{ componentBaseURL }}
+
Host microscope name: {{ hostDeviceName }}
+
{{ message }}
+
+
This cheeky little counter has all of its logic contained in a server-side component:
+
+ {{ value }}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/openflexure_microscope/api/extra_extensions/medscan/static/src/main.js b/openflexure_microscope/api/extra_extensions/medscan/static/src/main.js
new file mode 100644
index 00000000..ebdfd537
--- /dev/null
+++ b/openflexure_microscope/api/extra_extensions/medscan/static/src/main.js
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+new Vue({
+ render: h => h(App)
+}).$mount('#app')
\ No newline at end of file
diff --git a/openflexure_microscope/api/extra_extensions/medscan/static/vue.config.js b/openflexure_microscope/api/extra_extensions/medscan/static/vue.config.js
new file mode 100644
index 00000000..38b06e66
--- /dev/null
+++ b/openflexure_microscope/api/extra_extensions/medscan/static/vue.config.js
@@ -0,0 +1,4 @@
+process.env.VUE_APP_NAME = require('./package.json').name
+module.exports = {
+ productionSourceMap: false
+};
\ No newline at end of file