diff --git a/jsonconfig.json b/jsconfig.json
similarity index 100%
rename from jsonconfig.json
rename to jsconfig.json
diff --git a/src/main/web/configuration.js b/src/main/web/configuration.js
index 8998e59d..e22903b5 100644
--- a/src/main/web/configuration.js
+++ b/src/main/web/configuration.js
@@ -1,9 +1,6 @@
 import Vue from 'vue';
-import LicensesPage from './configuration/licenses-page';
-import DependencyMappingsPage from './configuration/dependency-mappings-page';
-import LicenseMappingsPage from './configuration/license-mappings-page';
-import ProjectLicensesPage from './configuration/project-licenses-page';
 import ModalDialog from './modal-dialog';
+import Configuration from './configuration/configuration.vue';
 import VueSVGIcon from 'vue-svgicon'
 
 Vue.use(VueSVGIcon)
@@ -13,44 +10,14 @@ window.registerExtension('licensecheck/configuration', function (options) {
   Vue.component('modal-dialog', ModalDialog);
   const app = new Vue({
     el: options.el,
-    data: () => {
-      return {
-        currentRoute: 'licenses'
-      }
-    },
-    methods: {
-      activateCategory(event, route) {
-        event.preventDefault();
-        this.currentRoute = route;
-        window.history.pushState({}, document.title, `?category=${route}`)
-      },
-      routeListener() {
-        const result = window.location.search.match(/category=([^&=]*)/);
-        if (result && result.length > 1) {
-          this.currentRoute = result[1];
-        } else {
-          this.currentRoute = 'licenses';
+    // Cannot use `template`. Eval is blocked by CSP
+    render(createElement) {
+      return createElement(Configuration, {
+        props: {
+          options
         }
-      }
-    },
-    components: { LicensesPage, DependencyMappingsPage, LicenseMappingsPage, ProjectLicensesPage},
-    template: `<div class="page page-limited">
-  <ul class="tabs">
-    <li><a href="?category=licenses" :class="{selected: currentRoute==='licenses'}" @click="activateCategory($event, 'licenses')">Licenses</a></li>
-    <li><a href="?category=license-mappings" :class="{selected: currentRoute==='license-mappings'}" @click="activateCategory($event, 'license-mappings')">License Mappings</a></li>
-    <li><a href="?category=dependency-mappings" :class="{selected: currentRoute==='dependency-mappings'}" @click="activateCategory($event, 'dependency-mappings')">Dependency Mappings</a></li>
-    <li><a href="?category=project-licenses" :class="{selected: currentRoute==='project-licenses'}" @click="activateCategory($event, 'project-licenses')">Project Licenses</a></li>
-  </ul>
-  <br>
-  <licenses-page v-if="currentRoute === 'licenses'">
-  </licenses-page>
-  <dependency-mappings-page v-if="currentRoute === 'dependency-mappings'">
-  </dependency-mappings-page>
-  <license-mappings-page v-if="currentRoute === 'license-mappings'">
-  </license-mappings-page>
-  <project-licenses-page v-if="currentRoute === 'project-licenses'">
-  </project-licenses-page>
-</div>`
+      });
+    }
   });
 
   window.addEventListener('popstate', app.routeListener);
diff --git a/src/main/web/configuration/configuration.vue b/src/main/web/configuration/configuration.vue
new file mode 100644
index 00000000..f0fc753f
--- /dev/null
+++ b/src/main/web/configuration/configuration.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="page page-limited">
+    <ul class="tabs">
+      <li><a href="?category=licenses" :class="{selected: currentRoute==='licenses'}" @click="activateCategory($event, 'licenses')">Licenses</a></li>
+      <li><a href="?category=license-mappings" :class="{selected: currentRoute==='license-mappings'}" @click="activateCategory($event, 'license-mappings')">License Mappings</a></li>
+      <li><a href="?category=dependency-mappings" :class="{selected: currentRoute==='dependency-mappings'}" @click="activateCategory($event, 'dependency-mappings')">Dependency Mappings</a></li>
+      <li><a href="?category=project-licenses" :class="{selected: currentRoute==='project-licenses'}" @click="activateCategory($event, 'project-licenses')">Project Licenses</a></li>
+    </ul>
+    <br>
+    <licenses-page v-if="currentRoute === 'licenses'">
+    </licenses-page>
+    <dependency-mappings-page v-if="currentRoute === 'dependency-mappings'">
+    </dependency-mappings-page>
+    <license-mappings-page v-if="currentRoute === 'license-mappings'">
+    </license-mappings-page>
+    <project-licenses-page v-if="currentRoute === 'project-licenses'">
+    </project-licenses-page>
+  </div>
+</template>
+
+<script>
+
+import LicensesPage from './licenses-page';
+import DependencyMappingsPage from './dependency-mappings-page';
+import LicenseMappingsPage from './license-mappings-page';
+import ProjectLicensesPage from './project-licenses-page';
+
+export default {
+  data: () => {
+      return {
+        currentRoute: 'licenses'
+      }
+    },
+    methods: {
+      activateCategory(event, route) {
+        event.preventDefault();
+        this.currentRoute = route;
+        window.history.pushState({}, document.title, `?category=${route}`)
+      },
+      routeListener() {
+        const result = window.location.search.match(/category=([^&=]*)/);
+        if (result && result.length > 1) {
+          this.currentRoute = result[1];
+        } else {
+          this.currentRoute = 'licenses';
+        }
+      }
+    },
+    components: { LicensesPage, DependencyMappingsPage, LicenseMappingsPage, ProjectLicensesPage},
+}
+</script>
+