diff --git a/medusa/server/web/config/handler.py b/medusa/server/web/config/handler.py
index e9a96e8857..15d5e38678 100644
--- a/medusa/server/web/config/handler.py
+++ b/medusa/server/web/config/handler.py
@@ -4,14 +4,7 @@
 
 from __future__ import unicode_literals
 
-import os
-
-from medusa import (
-    app,
-    db,
-)
 from medusa.server.web.core import PageTemplate, WebRoot
-from medusa.version_checker import CheckVersion
 
 from tornroutes import route
 
@@ -44,45 +37,9 @@ def ConfigMenu():
 
     def index(self):
         """
-        Render the Help & Info page
-        """
-        t = PageTemplate(rh=self, filename='config.mako')
-
-        try:
-            import pwd
-            app_user = pwd.getpwuid(os.getuid()).pw_name
-        except ImportError:
-            try:
-                import getpass
-                app_user = getpass.getuser()
-            except Exception:
-                app_user = 'Unknown'
-
-        try:
-            import locale
-            app_locale = locale.getdefaultlocale()
-        except Exception:
-            app_locale = 'Unknown', 'Unknown'
+        Render the Help & Info page.
 
-        try:
-            import ssl
-            ssl_version = ssl.OPENSSL_VERSION
-        except Exception:
-            ssl_version = 'Unknown'
-
-        app_version = ''
-        if app.VERSION_NOTIFY:
-            updater = CheckVersion().updater
-            if updater:
-                app_version = updater.get_cur_version()
-
-        main_db_con = db.DBConnection()
-        cur_branch_major_db_version, cur_branch_minor_db_version = main_db_con.checkDBVersion()
-
-        return t.render(
-            submenu=self.ConfigMenu(), title='Medusa Configuration',
-            header='Medusa Configuration', topmenu='config',
-            app_user=app_user, app_locale=app_locale, ssl_version=ssl_version,
-            app_version=app_version, cur_branch_major_db_version=cur_branch_major_db_version,
-            cur_branch_minor_db_version=cur_branch_minor_db_version
-        )
+        [Converted to VueRouter]
+        """
+        t = PageTemplate(rh=self, filename='index.mako')
+        return t.render(submenu=self.ConfigMenu(), topmenu='config')
diff --git a/themes-default/slim/static/js/lib/http-vue-loader.js b/themes-default/slim/static/js/lib/http-vue-loader.js
new file mode 100644
index 0000000000..6e24a0cdf4
--- /dev/null
+++ b/themes-default/slim/static/js/lib/http-vue-loader.js
@@ -0,0 +1,470 @@
+(function umd(root,factory){
+	if(typeof module==='object' && typeof exports === 'object' )
+		module.exports=factory()
+	else if(typeof define==='function' && define.amd)
+		define([],factory)
+	else
+		root.httpVueLoader=factory()
+})(this,function factory() {
+	'use strict';
+
+	var scopeIndex = 0;
+
+	StyleContext.prototype = {
+
+		withBase: function(callback) {
+
+			var tmpBaseElt;
+			if ( this.component.baseURI ) {
+
+				// firefox and chrome need the <base> to be set while inserting or modifying <style> in a document.
+				tmpBaseElt = document.createElement('base');
+				tmpBaseElt.href = this.component.baseURI;
+
+				var headElt = this.component.getHead();
+				headElt.insertBefore(tmpBaseElt, headElt.firstChild);
+			}
+
+			callback.call(this);
+
+			if ( tmpBaseElt )
+				this.component.getHead().removeChild(tmpBaseElt);
+		},
+
+		scopeStyles: function(styleElt, scopeName) {
+
+			function process() {
+
+				var sheet = styleElt.sheet;
+				var rules = sheet.cssRules;
+
+				for ( var i = 0; i < rules.length; ++i ) {
+
+					var rule = rules[i];
+					if ( rule.type !== 1 )
+						continue;
+
+					var scopedSelectors = [];
+
+					rule.selectorText.split(/\s*,\s*/).forEach(function(sel) {
+
+						scopedSelectors.push(scopeName+' '+sel);
+						var segments = sel.match(/([^ :]+)(.+)?/);
+						scopedSelectors.push(segments[1] + scopeName + (segments[2]||''));
+					});
+
+					var scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);
+					sheet.deleteRule(i);
+					sheet.insertRule(scopedRule, i);
+				}
+			}
+
+			try {
+				// firefox may fail sheet.cssRules with InvalidAccessError
+				process();
+			} catch (ex) {
+
+				if ( ex instanceof DOMException && ex.code === DOMException.INVALID_ACCESS_ERR ) {
+
+					styleElt.sheet.disabled = true;
+					styleElt.addEventListener('load', function onStyleLoaded() {
+
+						styleElt.removeEventListener('load', onStyleLoaded);
+
+						// firefox need this timeout otherwise we have to use document.importNode(style, true)
+						setTimeout(function() {
+
+							process();
+							styleElt.sheet.disabled = false;
+						});
+					});
+					return;
+				}
+
+				throw ex;
+			}
+		},
+
+		compile: function() {
+
+			var hasTemplate = this.template !== null;
+
+			var scoped = this.elt.hasAttribute('scoped');
+
+			if ( scoped ) {
+
+				// no template, no scopable style needed
+				if ( !hasTemplate )
+					return;
+
+				// firefox does not tolerate this attribute
+				this.elt.removeAttribute('scoped');
+			}
+
+			this.withBase(function() {
+
+				this.component.getHead().appendChild(this.elt);
+			});
+
+			if ( scoped )
+				this.scopeStyles(this.elt, '['+this.component.getScopeId()+']');
+
+			return Promise.resolve();
+		},
+
+		getContent: function() {
+
+			return this.elt.textContent;
+		},
+
+		setContent: function(content) {
+
+			this.withBase(function() {
+
+				this.elt.textContent = content;
+			});
+		}
+	};
+
+	function StyleContext(component, elt) {
+
+		this.component = component;
+		this.elt = elt;
+	}
+
+
+	ScriptContext.prototype = {
+
+		getContent: function() {
+
+			return this.elt.textContent;
+		},
+
+		setContent: function(content) {
+
+			this.elt.textContent = content;
+		},
+
+		compile: function(module) {
+
+			var childModuleRequire = function(childURL) {
+
+				return httpVueLoader.require(resolveURL(this.component.baseURI, childURL));
+			}.bind(this);
+
+			var childLoader = function(childURL, childName) {
+
+				return httpVueLoader(resolveURL(this.component.baseURI, childURL), childName);
+			}.bind(this);
+
+			try {
+				Function('exports', 'require', 'httpVueLoader', 'module', this.getContent()).call(this.module.exports, this.module.exports, childModuleRequire, childLoader, this.module);
+			} catch(ex) {
+
+				if ( !('lineNumber' in ex) ) {
+
+					return Promise.reject(ex);
+				}
+				var vueFileData = responseText.replace(/\r?\n/g, '\n');
+				var lineNumber = vueFileData.substr(0, vueFileData.indexOf(script)).split('\n').length + ex.lineNumber - 1;
+				throw new (ex.constructor)(ex.message, url, lineNumber);
+			}
+
+			return Promise.resolve(this.module.exports);
+		}
+	};
+
+	function ScriptContext(component, elt) {
+
+		this.component = component;
+		this.elt = elt;
+		this.module = { exports:{} };
+	}
+
+
+	TemplateContext.prototype = {
+
+		getContent: function() {
+
+			return this.elt.innerHTML;
+		},
+
+		setContent: function(content) {
+
+			this.elt.innerHTML = content;
+		},
+
+		getRootElt: function() {
+
+			var tplElt = this.elt.content || this.elt;
+
+			if ( 'firstElementChild' in tplElt )
+				return tplElt.firstElementChild;
+
+			for ( tplElt = tplElt.firstChild; tplElt !== null; tplElt = tplElt.nextSibling )
+				if ( tplElt.nodeType === Node.ELEMENT_NODE )
+					return tplElt;
+
+			return null;
+		},
+
+		compile: function() {
+
+			return Promise.resolve();
+		}
+	};
+
+	function TemplateContext(component, elt) {
+
+		this.component = component;
+		this.elt = elt;
+	}
+
+
+
+	Component.prototype = {
+
+		getHead: function() {
+
+			return document.head || document.getElementsByTagName('head')[0];
+		},
+
+		getScopeId: function() {
+
+			if ( this._scopeId === '' ) {
+
+				this._scopeId = 'data-s-' + (scopeIndex++).toString(36);
+				this.template.getRootElt().setAttribute(this._scopeId, '');
+			}
+			return this._scopeId;
+		},
+
+		load: function(componentURL) {
+
+			return httpVueLoader.httpRequest(componentURL)
+			.then(function(responseText) {
+
+				this.baseURI = componentURL.substr(0, componentURL.lastIndexOf('/')+1);
+				var doc = document.implementation.createHTMLDocument('');
+
+				// IE requires the <base> to come with <style>
+				doc.body.innerHTML = (this.baseURI ? '<base href="'+this.baseURI+'">' : '') + responseText;
+
+				for ( var it = doc.body.firstChild; it; it = it.nextSibling ) {
+
+					switch ( it.nodeName ) {
+						case 'TEMPLATE':
+							this.template = new TemplateContext(this, it);
+							break;
+						case 'SCRIPT':
+							this.script = new ScriptContext(this, it);
+							break;
+						case 'STYLE':
+							this.styles.push(new StyleContext(this, it));
+							break;
+					}
+				}
+
+				return this;
+			}.bind(this));
+		},
+
+		_normalizeSection: function(eltCx) {
+
+			var p;
+
+			if ( eltCx === null || !eltCx.elt.hasAttribute('src') ) {
+
+				p = Promise.resolve(null);
+			} else {
+
+				p = httpVueLoader.httpRequest(eltCx.elt.getAttribute('src'))
+				.then(function(content) {
+
+					eltCx.elt.removeAttribute('src');
+					return content;
+				});
+			}
+
+			return p
+			.then(function(content) {
+
+				if ( eltCx !== null && eltCx.elt.hasAttribute('lang') ) {
+
+					var lang = eltCx.elt.getAttribute('lang');
+					eltCx.elt.removeAttribute('lang');
+					return httpVueLoader.langProcessor[lang.toLowerCase()](content === null ? eltCx.getContent() : content);
+				}
+				return content;
+			})
+			.then(function(content) {
+
+				if ( content !== null )
+					eltCx.setContent(content);
+			});
+		},
+
+		normalize: function() {
+
+			return Promise.all(Array.prototype.concat(
+				this._normalizeSection(this.template),
+				this._normalizeSection(this.script),
+				this.styles.map(this._normalizeSection)
+			))
+			.then(function() {
+
+				return this;
+			}.bind(this));
+		},
+
+		compile: function() {
+
+			return Promise.all(Array.prototype.concat(
+				this.template && this.template.compile(),
+				this.script && this.script.compile(),
+				this.styles.map(function(style) { return style.compile(); })
+			))
+			.then(function() {
+
+				return this;
+			}.bind(this));
+		}
+	};
+
+	function Component(name) {
+
+		this.name = name;
+		this.template = null;
+		this.script = null;
+		this.styles = [];
+		this._scopeId = '';
+	}
+
+	function identity(value) {
+
+		return value;
+	}
+
+	function parseComponentURL(url) {
+
+		var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);
+		return {
+			name: comp[2],
+			url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
+		};
+	}
+
+	function resolveURL(baseURL, url) {
+
+		if (url.substr(0, 2) === './' || url.substr(0, 3) === '../') {
+			return baseURL + url;
+		}
+		return url;
+	}
+
+
+	httpVueLoader.load = function(url, name) {
+
+		return function() {
+
+			return new Component(name).load(url)
+			.then(function(component) {
+
+				return component.normalize();
+			})
+			.then(function(component) {
+
+				return component.compile();
+			})
+			.then(function(component) {
+
+				var exports = component.script !== null ? component.script.module.exports : {};
+
+				if ( component.template !== null )
+					exports.template = component.template.getContent();
+
+				if ( exports.name === undefined )
+					if ( component.name !== undefined )
+						exports.name = component.name;
+
+				exports._baseURI = component.baseURI;
+
+				return exports;
+			});
+		};
+	};
+
+
+	httpVueLoader.register = function(Vue, url) {
+
+		var comp = parseComponentURL(url);
+		Vue.component(comp.name, httpVueLoader.load(comp.url));
+	};
+
+	httpVueLoader.install = function(Vue) {
+
+		Vue.mixin({
+
+			beforeCreate: function () {
+
+				var components = this.$options.components;
+
+				for ( var componentName in components ) {
+
+					if ( typeof(components[componentName]) === 'string' && components[componentName].substr(0, 4) === 'url:' ) {
+
+						var comp = parseComponentURL(components[componentName].substr(4));
+
+						var componentURL = ('_baseURI' in this.$options) ? resolveURL(this.$options._baseURI, comp.url) : comp.url;
+
+						if ( isNaN(componentName) )
+							components[componentName] = httpVueLoader.load(componentURL, componentName);
+						else
+							components[componentName] = Vue.component(comp.name, httpVueLoader.load(componentURL, comp.name));
+					}
+				}
+			}
+		});
+	};
+
+	httpVueLoader.require = function(moduleName) {
+
+		return window[moduleName];
+	};
+
+	httpVueLoader.httpRequest = function(url) {
+
+		return new Promise(function(resolve, reject) {
+
+			var xhr = new XMLHttpRequest();
+			xhr.open('GET', url);
+
+			xhr.onreadystatechange = function() {
+
+				if ( xhr.readyState === 4 ) {
+
+					if ( xhr.status >= 200 && xhr.status < 300 )
+						resolve(xhr.responseText);
+					else
+						reject(xhr.status);
+				}
+			};
+
+			xhr.send(null);
+		});
+	};
+
+	httpVueLoader.langProcessor = {
+		html: identity,
+		js: identity,
+		css: identity
+	};
+
+	function httpVueLoader(url, name) {
+
+		var comp = parseComponentURL(url);
+		return httpVueLoader.load(comp.url, name);
+	}
+
+	return httpVueLoader;
+});
diff --git a/themes-default/slim/static/js/router.js b/themes-default/slim/static/js/router.js
new file mode 100644
index 0000000000..af4810bc4a
--- /dev/null
+++ b/themes-default/slim/static/js/router.js
@@ -0,0 +1,47 @@
+const VueRouter = window.vueRouter;
+const { routes, httpVueLoader } = window;
+
+if (!window.router) {
+    const configComponent = httpVueLoader('js/templates/config.vue');
+    const notFoundComponent = httpVueLoader('js/templates/http/404.vue');
+
+    const router = new VueRouter({
+        base: document.body.getAttribute('api-root').replace('api/v2/', ''),
+        mode: 'history',
+        routes: Object.assign(routes || [], [{
+            path: '/config',
+            name: 'config',
+            meta: {
+                title: 'Help & Info',
+                header: 'Medusa Configuration'
+            },
+            component: configComponent
+        }, {
+            path: '/not-found',
+            name: 'not-found',
+            meta: {
+                title: '404',
+                header: '404 - page not found'
+            },
+            component: notFoundComponent
+        }, {
+            path: '*',
+            redirect: '/not-found'
+        }])
+    });
+
+    router.beforeEach((to, from, next) => {
+        const { meta } = to;
+        const { title } = meta;
+
+        // If there's no title then it's not a .vue route so skip
+        if (title) {
+            document.title = `${to.meta.title} | Medusa`;
+        }
+
+        // Always call next otherwise the <router-view> will be empty
+        next();
+    });
+
+    window.router = router;
+}
diff --git a/themes-default/slim/static/js/templates/config.vue b/themes-default/slim/static/js/templates/config.vue
new file mode 100644
index 0000000000..114fe06ed1
--- /dev/null
+++ b/themes-default/slim/static/js/templates/config.vue
@@ -0,0 +1,67 @@
+<template>
+    <div id="config-content">
+        <table class="infoTable" cellspacing="1" border="0" cellpadding="0" width="100%">
+            <tr>
+                <td><i class="icon16-config-application"></i> Medusa Info:</td>
+                <td>
+                    Branch:
+                    <span v-if="config.branch"><app-link :href="config.sourceUrl + '/tree/' + config.branch">{{config.branch}}</app-link></span>
+                    <span v-else>Unknown</span>
+                    <br>
+                    Commit:
+                    <span v-if="config.commitHash"><app-link :href="config.sourceUrl + '/commit/' + config.commitHash">{{config.commitHash}}</app-link></span>
+                    <span v-else>Unknown</span>
+                    <br>
+                    Version:
+                    <span v-if="config.release"><app-link :href="config.sourceUrl + '/releases/tag/' + config.release">{{config.release}}</app-link></span>
+                    <span v-else>Unknown</span>
+                    <br>
+                    Database:
+                    <span v-if="config.databaseVersion">{{config.databaseVersion.major}}.{{config.databaseVersion.minor}}</span>
+                    <span v-else>Unknown</span>
+                </td>
+            </tr>
+            <tr><td><i class="icon16-config-python"></i> Python Version:</td><td>{{config.pythonVersion}}</td></tr>
+            <tr><td><i class="icon16-config-ssl"></i> SSL Version:</td><td>{{config.sslVersion}}</td></tr>
+            <tr><td><i class="icon16-config-os"></i> OS:</td><td>{{config.os}}</td></tr>
+            <tr><td><i class="icon16-config-locale"></i> Locale:</td><td>{{config.locale}}</td></tr>
+            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr><td><i class="icon16-config-user"></i> User:</td><td>{{config.localUser}}</td></tr>
+            <tr><td><i class="icon16-config-dir"></i> Program Folder:</td><td>{{config.programDir}}</td></tr>
+            <tr><td><i class="icon16-config-config"></i> Config File:</td><td>{{config.configFile}}</td></tr>
+            <tr><td><i class="icon16-config-db"></i> Database File:</td><td>{{config.dbPath}}</td></tr>
+            <tr><td><i class="icon16-config-cache"></i> Cache Folder:</td><td>{{config.cacheDir}}</td></tr>
+            <tr><td><i class="icon16-config-log"></i> Log Folder:</td><td>{{config.logDir}}</td></tr>
+            <tr v-if="config.appArgs"><td><i class="icon16-config-arguments"></i> Arguments:</td><td><pre>{{prettyPrintJSON(config.appArgs)}}</pre></td></tr>
+            <tr v-if="config.webRoot"><td><i class="icon16-config-folder"></i> Web Root:</td><td>{{config.webRoot}}</td></tr>
+            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr><td><i class="icon16-config-web"></i> Website:</td><td><app-link :href="config.githubUrl">{{config.githubUrl}}</app-link></td></tr>
+            <tr><td><i class="icon16-config-wiki"></i> Wiki:</td><td><app-link :href="config.wikiUrl">{{config.wikiUrl}}</app-link></td></tr>
+            <tr><td><i class="icon16-config-github"></i> Source:</td><td><app-link :href="config.sourceUrl">{{config.sourceUrl}}</app-link></td></tr>
+            <tr><td><i class="icon16-config-mirc"></i> IRC Chat:</td><td><app-link href="irc://irc.freenode.net/#pymedusa"><i>#pymedusa</i> on <i>irc.freenode.net</i></app-link></td></tr>
+        </table>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    name: 'config',
+    store, // eslint-disable-line no-undef
+    computed: {
+        config() {
+            return this.store.state.config;
+        }
+    },
+    methods: {
+        prettyPrintJSON: str => JSON.stringify(str, undefined, 4)
+    }
+};
+</script>
+
+<style>
+.infoTable tr td:first-child {
+  vertical-align: top;
+}
+</style>
diff --git a/themes-default/slim/static/js/templates/http/404.vue b/themes-default/slim/static/js/templates/http/404.vue
new file mode 100644
index 0000000000..475cfc78bc
--- /dev/null
+++ b/themes-default/slim/static/js/templates/http/404.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="align-center">You have reached this page by accident, please check the url.</div>
+</template>
diff --git a/themes-default/slim/views/config.mako b/themes-default/slim/views/config.mako
deleted file mode 100644
index e2bebc0d0f..0000000000
--- a/themes-default/slim/views/config.mako
+++ /dev/null
@@ -1,122 +0,0 @@
-<%inherit file="/layouts/main.mako"/>
-<%block name="scripts">
-<script type="text/x-template" id="config-route-template">
-    <div id="config-content">
-        <table class="infoTable" cellspacing="1" border="0" cellpadding="0" width="100%">
-            <tr>
-                <td><i class="icon16-config-application"></i> Medusa Info:</td>
-                <td>
-                    Branch:
-                    <span v-if="branch"><app-link :href="sourceUrl + '/tree/' + branch">{{branch}}</app-link></span>
-                    <span v-else>Unknown</span>
-                    <br>
-                    Commit:
-                    <span v-if="commitHash"><app-link :href="sourceUrl + '/commit/' + commitHash">{{commitHash}}</app-link></span>
-                    <span v-else>Unknown</span>
-                    <br>
-                    Version:
-                    <span v-if="release"><app-link :href="sourceUrl + '/releases/tag/' + release">{{release}}</app-link></span>
-                    <span v-else>Unknown</span>
-                    <br>
-                    Database:
-                    <span v-if="databaseVersion">{{databaseVersion.major}}.{{databaseVersion.minor}}</span>
-                    <span v-else>Unknown</span>
-                </td>
-            </tr>
-            <tr><td><i class="icon16-config-python"></i> Python Version:</td><td>{{pythonVersion}}</td></tr>
-            <tr><td><i class="icon16-config-ssl"></i> SSL Version:</td><td>{{sslVersion}}</td></tr>
-            <tr><td><i class="icon16-config-os"></i> OS:</td><td>{{os}}</td></tr>
-            <tr><td><i class="icon16-config-locale"></i> Locale:</td><td>{{locale}}</td></tr>
-            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr><td><i class="icon16-config-user"></i> User:</td><td>{{localUser}}</td></tr>
-            <tr><td><i class="icon16-config-dir"></i> Program Folder:</td><td>{{programDir}}</td></tr>
-            <tr><td><i class="icon16-config-config"></i> Config File:</td><td>{{configFile}}</td></tr>
-            <tr><td><i class="icon16-config-db"></i> Database File:</td><td>{{dbPath}}</td></tr>
-            <tr><td><i class="icon16-config-cache"></i> Cache Folder:</td><td>{{cacheDir}}</td></tr>
-            <tr><td><i class="icon16-config-log"></i> Log Folder:</td><td>{{logDir}}</td></tr>
-            <tr v-if="appArgs"><td><i class="icon16-config-arguments"></i> Arguments:</td><td><pre>{{prettyPrintJSON(appArgs)}}</pre></td></tr>
-            <tr v-if="webRoot"><td><i class="icon16-config-folder"></i> Web Root:</td><td>{{webRoot}}</td></tr>
-            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr><td><i class="icon16-config-web"></i> Website:</td><td><app-link :href="githubUrl">{{githubUrl}}</app-link></td></tr>
-            <tr><td><i class="icon16-config-wiki"></i> Wiki:</td><td><app-link :href="wikiUrl">{{wikiUrl}}</app-link></td></tr>
-            <tr><td><i class="icon16-config-github"></i> Source:</td><td><app-link :href="sourceUrl">{{sourceUrl}}</app-link></td></tr>
-            <tr><td><i class="icon16-config-mirc"></i> IRC Chat:</td><td><app-link href="irc://irc.freenode.net/#pymedusa" rel="noreferrer"><i>#pymedusa</i> on <i>irc.freenode.net</i></app-link></td></tr>
-        </table>
-    </div>
-</script>
-<script>
-const component = {
-    name: 'config',
-    metaInfo: {
-        title: 'Help & Info'
-    },
-    template: '#config-route-template',
-    data() {
-        return {
-            appArgs: undefined,
-            branch: undefined,
-            cacheDir: undefined,
-            commitHash: undefined,
-            configFile: undefined,
-            databaseVersion: undefined,
-            dbPath: undefined,
-            githubUrl: undefined,
-            locale: undefined,
-            localUser: undefined,
-            logDir: undefined,
-            os: undefined,
-            programDir: undefined,
-            pythonVersion: undefined,
-            release: undefined,
-            sourceUrl: undefined,
-            sslVersion: undefined,
-            webRoot: undefined,
-            wikiUrl: undefined
-        };
-    },
-    async mounted() {
-        const { data } = await api.get('config/main');
-        this.appArgs = data.appArgs;
-        this.branch = data.branch;
-        this.cacheDir = data.cacheDir;
-        this.commitHash = data.commitHash;
-        this.configFile = data.configFile;
-        this.databaseVersion = data.databaseVersion;
-        this.dbPath = data.dbPath;
-        this.githubUrl = data.githubUrl;
-        this.locale = data.locale;
-        this.localUser = data.localUser;
-        this.logDir = data.logDir;
-        this.os = data.os;
-        this.programDir = data.programDir;
-        this.pythonVersion = data.pythonVersion;
-        this.release = data.release;
-        this.sourceUrl = data.sourceUrl;
-        this.sslVersion = data.sslVersion;
-        this.webRoot = data.webRoot;
-        this.wikiUrl = data.wikiUrl;
-    },
-    methods: {
-        prettyPrintJSON: str => JSON.stringify(str, undefined, 4)
-    }
-};
-
-window.routes.push({
-    path: '/config',
-    component
-});
-</script>
-</%block>
-<%block name="css">
-<style>
-.infoTable tr td:first-child {
-  vertical-align: top;
-}
-</style>
-</%block>
-<%block name="content">
-<h1 class="header">Medusa Configuration</h1>
-<router-view/>
-</%block>
diff --git a/themes-default/slim/views/index.mako b/themes-default/slim/views/index.mako
index e69de29bb2..672544e1fd 100644
--- a/themes-default/slim/views/index.mako
+++ b/themes-default/slim/views/index.mako
@@ -0,0 +1,5 @@
+<%inherit file="/layouts/main.mako"/>
+<%block name="content">
+<h1 v-if="$route.meta.header" class="header">{{$route.meta.header}}</h1>
+<router-view></router-view>
+</%block>
diff --git a/themes-default/slim/views/layouts/main.mako b/themes-default/slim/views/layouts/main.mako
index d128c9cf3b..78d16e0df6 100644
--- a/themes-default/slim/views/layouts/main.mako
+++ b/themes-default/slim/views/layouts/main.mako
@@ -114,6 +114,7 @@
             ## @NOTE: These will be usable on all pages
         %>
         <script src="js/lib/vue.js"></script>
+        <script src="js/lib/http-vue-loader.js"></script>
         <script src="js/lib/vue-async-computed@3.3.0.js"></script>
         <script src="js/lib/vue-in-viewport-mixin.min.js"></script>
         <script src="js/lib/vue-router.min.js"></script>
@@ -181,19 +182,13 @@
             }
         </script>
         <%block name="scripts" />
+        <script src="js/router.js"></script>
         <script>
-            if (!window.router) {
-                window.router = new vueRouter({
-                    base: document.body.getAttribute('api-root').replace('api/v2/', ''),
-                    mode: 'history',
-                    routes
-                });
-            }
             if (!window.app) {
                 console.info('Loading Vue with router since window.app is missing.');
                 window.app = new Vue({
                     el: '#vue-wrap',
-                    router
+                    router: window.router
                 });
             } else {
                 console.info('Loading local Vue since we found a window.app');
diff --git a/themes/dark/assets/js/lib/http-vue-loader.js b/themes/dark/assets/js/lib/http-vue-loader.js
new file mode 100644
index 0000000000..6e24a0cdf4
--- /dev/null
+++ b/themes/dark/assets/js/lib/http-vue-loader.js
@@ -0,0 +1,470 @@
+(function umd(root,factory){
+	if(typeof module==='object' && typeof exports === 'object' )
+		module.exports=factory()
+	else if(typeof define==='function' && define.amd)
+		define([],factory)
+	else
+		root.httpVueLoader=factory()
+})(this,function factory() {
+	'use strict';
+
+	var scopeIndex = 0;
+
+	StyleContext.prototype = {
+
+		withBase: function(callback) {
+
+			var tmpBaseElt;
+			if ( this.component.baseURI ) {
+
+				// firefox and chrome need the <base> to be set while inserting or modifying <style> in a document.
+				tmpBaseElt = document.createElement('base');
+				tmpBaseElt.href = this.component.baseURI;
+
+				var headElt = this.component.getHead();
+				headElt.insertBefore(tmpBaseElt, headElt.firstChild);
+			}
+
+			callback.call(this);
+
+			if ( tmpBaseElt )
+				this.component.getHead().removeChild(tmpBaseElt);
+		},
+
+		scopeStyles: function(styleElt, scopeName) {
+
+			function process() {
+
+				var sheet = styleElt.sheet;
+				var rules = sheet.cssRules;
+
+				for ( var i = 0; i < rules.length; ++i ) {
+
+					var rule = rules[i];
+					if ( rule.type !== 1 )
+						continue;
+
+					var scopedSelectors = [];
+
+					rule.selectorText.split(/\s*,\s*/).forEach(function(sel) {
+
+						scopedSelectors.push(scopeName+' '+sel);
+						var segments = sel.match(/([^ :]+)(.+)?/);
+						scopedSelectors.push(segments[1] + scopeName + (segments[2]||''));
+					});
+
+					var scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);
+					sheet.deleteRule(i);
+					sheet.insertRule(scopedRule, i);
+				}
+			}
+
+			try {
+				// firefox may fail sheet.cssRules with InvalidAccessError
+				process();
+			} catch (ex) {
+
+				if ( ex instanceof DOMException && ex.code === DOMException.INVALID_ACCESS_ERR ) {
+
+					styleElt.sheet.disabled = true;
+					styleElt.addEventListener('load', function onStyleLoaded() {
+
+						styleElt.removeEventListener('load', onStyleLoaded);
+
+						// firefox need this timeout otherwise we have to use document.importNode(style, true)
+						setTimeout(function() {
+
+							process();
+							styleElt.sheet.disabled = false;
+						});
+					});
+					return;
+				}
+
+				throw ex;
+			}
+		},
+
+		compile: function() {
+
+			var hasTemplate = this.template !== null;
+
+			var scoped = this.elt.hasAttribute('scoped');
+
+			if ( scoped ) {
+
+				// no template, no scopable style needed
+				if ( !hasTemplate )
+					return;
+
+				// firefox does not tolerate this attribute
+				this.elt.removeAttribute('scoped');
+			}
+
+			this.withBase(function() {
+
+				this.component.getHead().appendChild(this.elt);
+			});
+
+			if ( scoped )
+				this.scopeStyles(this.elt, '['+this.component.getScopeId()+']');
+
+			return Promise.resolve();
+		},
+
+		getContent: function() {
+
+			return this.elt.textContent;
+		},
+
+		setContent: function(content) {
+
+			this.withBase(function() {
+
+				this.elt.textContent = content;
+			});
+		}
+	};
+
+	function StyleContext(component, elt) {
+
+		this.component = component;
+		this.elt = elt;
+	}
+
+
+	ScriptContext.prototype = {
+
+		getContent: function() {
+
+			return this.elt.textContent;
+		},
+
+		setContent: function(content) {
+
+			this.elt.textContent = content;
+		},
+
+		compile: function(module) {
+
+			var childModuleRequire = function(childURL) {
+
+				return httpVueLoader.require(resolveURL(this.component.baseURI, childURL));
+			}.bind(this);
+
+			var childLoader = function(childURL, childName) {
+
+				return httpVueLoader(resolveURL(this.component.baseURI, childURL), childName);
+			}.bind(this);
+
+			try {
+				Function('exports', 'require', 'httpVueLoader', 'module', this.getContent()).call(this.module.exports, this.module.exports, childModuleRequire, childLoader, this.module);
+			} catch(ex) {
+
+				if ( !('lineNumber' in ex) ) {
+
+					return Promise.reject(ex);
+				}
+				var vueFileData = responseText.replace(/\r?\n/g, '\n');
+				var lineNumber = vueFileData.substr(0, vueFileData.indexOf(script)).split('\n').length + ex.lineNumber - 1;
+				throw new (ex.constructor)(ex.message, url, lineNumber);
+			}
+
+			return Promise.resolve(this.module.exports);
+		}
+	};
+
+	function ScriptContext(component, elt) {
+
+		this.component = component;
+		this.elt = elt;
+		this.module = { exports:{} };
+	}
+
+
+	TemplateContext.prototype = {
+
+		getContent: function() {
+
+			return this.elt.innerHTML;
+		},
+
+		setContent: function(content) {
+
+			this.elt.innerHTML = content;
+		},
+
+		getRootElt: function() {
+
+			var tplElt = this.elt.content || this.elt;
+
+			if ( 'firstElementChild' in tplElt )
+				return tplElt.firstElementChild;
+
+			for ( tplElt = tplElt.firstChild; tplElt !== null; tplElt = tplElt.nextSibling )
+				if ( tplElt.nodeType === Node.ELEMENT_NODE )
+					return tplElt;
+
+			return null;
+		},
+
+		compile: function() {
+
+			return Promise.resolve();
+		}
+	};
+
+	function TemplateContext(component, elt) {
+
+		this.component = component;
+		this.elt = elt;
+	}
+
+
+
+	Component.prototype = {
+
+		getHead: function() {
+
+			return document.head || document.getElementsByTagName('head')[0];
+		},
+
+		getScopeId: function() {
+
+			if ( this._scopeId === '' ) {
+
+				this._scopeId = 'data-s-' + (scopeIndex++).toString(36);
+				this.template.getRootElt().setAttribute(this._scopeId, '');
+			}
+			return this._scopeId;
+		},
+
+		load: function(componentURL) {
+
+			return httpVueLoader.httpRequest(componentURL)
+			.then(function(responseText) {
+
+				this.baseURI = componentURL.substr(0, componentURL.lastIndexOf('/')+1);
+				var doc = document.implementation.createHTMLDocument('');
+
+				// IE requires the <base> to come with <style>
+				doc.body.innerHTML = (this.baseURI ? '<base href="'+this.baseURI+'">' : '') + responseText;
+
+				for ( var it = doc.body.firstChild; it; it = it.nextSibling ) {
+
+					switch ( it.nodeName ) {
+						case 'TEMPLATE':
+							this.template = new TemplateContext(this, it);
+							break;
+						case 'SCRIPT':
+							this.script = new ScriptContext(this, it);
+							break;
+						case 'STYLE':
+							this.styles.push(new StyleContext(this, it));
+							break;
+					}
+				}
+
+				return this;
+			}.bind(this));
+		},
+
+		_normalizeSection: function(eltCx) {
+
+			var p;
+
+			if ( eltCx === null || !eltCx.elt.hasAttribute('src') ) {
+
+				p = Promise.resolve(null);
+			} else {
+
+				p = httpVueLoader.httpRequest(eltCx.elt.getAttribute('src'))
+				.then(function(content) {
+
+					eltCx.elt.removeAttribute('src');
+					return content;
+				});
+			}
+
+			return p
+			.then(function(content) {
+
+				if ( eltCx !== null && eltCx.elt.hasAttribute('lang') ) {
+
+					var lang = eltCx.elt.getAttribute('lang');
+					eltCx.elt.removeAttribute('lang');
+					return httpVueLoader.langProcessor[lang.toLowerCase()](content === null ? eltCx.getContent() : content);
+				}
+				return content;
+			})
+			.then(function(content) {
+
+				if ( content !== null )
+					eltCx.setContent(content);
+			});
+		},
+
+		normalize: function() {
+
+			return Promise.all(Array.prototype.concat(
+				this._normalizeSection(this.template),
+				this._normalizeSection(this.script),
+				this.styles.map(this._normalizeSection)
+			))
+			.then(function() {
+
+				return this;
+			}.bind(this));
+		},
+
+		compile: function() {
+
+			return Promise.all(Array.prototype.concat(
+				this.template && this.template.compile(),
+				this.script && this.script.compile(),
+				this.styles.map(function(style) { return style.compile(); })
+			))
+			.then(function() {
+
+				return this;
+			}.bind(this));
+		}
+	};
+
+	function Component(name) {
+
+		this.name = name;
+		this.template = null;
+		this.script = null;
+		this.styles = [];
+		this._scopeId = '';
+	}
+
+	function identity(value) {
+
+		return value;
+	}
+
+	function parseComponentURL(url) {
+
+		var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);
+		return {
+			name: comp[2],
+			url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
+		};
+	}
+
+	function resolveURL(baseURL, url) {
+
+		if (url.substr(0, 2) === './' || url.substr(0, 3) === '../') {
+			return baseURL + url;
+		}
+		return url;
+	}
+
+
+	httpVueLoader.load = function(url, name) {
+
+		return function() {
+
+			return new Component(name).load(url)
+			.then(function(component) {
+
+				return component.normalize();
+			})
+			.then(function(component) {
+
+				return component.compile();
+			})
+			.then(function(component) {
+
+				var exports = component.script !== null ? component.script.module.exports : {};
+
+				if ( component.template !== null )
+					exports.template = component.template.getContent();
+
+				if ( exports.name === undefined )
+					if ( component.name !== undefined )
+						exports.name = component.name;
+
+				exports._baseURI = component.baseURI;
+
+				return exports;
+			});
+		};
+	};
+
+
+	httpVueLoader.register = function(Vue, url) {
+
+		var comp = parseComponentURL(url);
+		Vue.component(comp.name, httpVueLoader.load(comp.url));
+	};
+
+	httpVueLoader.install = function(Vue) {
+
+		Vue.mixin({
+
+			beforeCreate: function () {
+
+				var components = this.$options.components;
+
+				for ( var componentName in components ) {
+
+					if ( typeof(components[componentName]) === 'string' && components[componentName].substr(0, 4) === 'url:' ) {
+
+						var comp = parseComponentURL(components[componentName].substr(4));
+
+						var componentURL = ('_baseURI' in this.$options) ? resolveURL(this.$options._baseURI, comp.url) : comp.url;
+
+						if ( isNaN(componentName) )
+							components[componentName] = httpVueLoader.load(componentURL, componentName);
+						else
+							components[componentName] = Vue.component(comp.name, httpVueLoader.load(componentURL, comp.name));
+					}
+				}
+			}
+		});
+	};
+
+	httpVueLoader.require = function(moduleName) {
+
+		return window[moduleName];
+	};
+
+	httpVueLoader.httpRequest = function(url) {
+
+		return new Promise(function(resolve, reject) {
+
+			var xhr = new XMLHttpRequest();
+			xhr.open('GET', url);
+
+			xhr.onreadystatechange = function() {
+
+				if ( xhr.readyState === 4 ) {
+
+					if ( xhr.status >= 200 && xhr.status < 300 )
+						resolve(xhr.responseText);
+					else
+						reject(xhr.status);
+				}
+			};
+
+			xhr.send(null);
+		});
+	};
+
+	httpVueLoader.langProcessor = {
+		html: identity,
+		js: identity,
+		css: identity
+	};
+
+	function httpVueLoader(url, name) {
+
+		var comp = parseComponentURL(url);
+		return httpVueLoader.load(comp.url, name);
+	}
+
+	return httpVueLoader;
+});
diff --git a/themes/dark/assets/js/router.js b/themes/dark/assets/js/router.js
new file mode 100644
index 0000000000..19200c29cf
--- /dev/null
+++ b/themes/dark/assets/js/router.js
@@ -0,0 +1,47 @@
+const VueRouter = window.vueRouter;
+const { routes, httpVueLoader } = window;
+
+if (!window.router) {
+    const configComponent = httpVueLoader('js/templates/config.vue');
+    const notFoundComponent = httpVueLoader('js/templates/http/404.vue');
+
+    const router = new VueRouter({
+        base: document.body.getAttribute('api-root').replace('api/v2/', ''),
+        mode: 'history',
+        routes: Object.assign(routes || [], [{
+            path: '/config',
+            name: 'config',
+            meta: {
+                title: 'Help & Info',
+                header: 'Medusa Configuration'
+            },
+            component: configComponent
+        }, {
+            path: '/not-found',
+            name: 'not-found',
+            meta: {
+                title: '404',
+                header: '404 - page not found'
+            },
+            component: notFoundComponent
+        }, {
+            path: '*',
+            redirect: '/not-found'
+        }])
+    });
+
+    router.beforeEach((to, from, next) => {
+        const { meta } = to;
+        const { title } = meta;
+
+        // If there's no title then it's not a .vue route so skip
+        if (title) {
+            document.title = `${to.meta.title} | Medusa`;
+        }
+
+        // @Note: Always call next otherwise the <router-view> will be empty
+        next();
+    });
+
+    window.router = router;
+}
diff --git a/themes/dark/assets/js/router.js.map b/themes/dark/assets/js/router.js.map
new file mode 100644
index 0000000000..acb49bb3c4
--- /dev/null
+++ b/themes/dark/assets/js/router.js.map
@@ -0,0 +1 @@
+{"version":3,"names":[],"mappings":"","sources":["js/router.js"],"sourcesContent":["(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c=\"function\"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error(\"Cannot find module '\"+i+\"'\");throw a.code=\"MODULE_NOT_FOUND\",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u=\"function\"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){\nconst VueRouter = window.vueRouter;\nconst { routes, httpVueLoader } = window;\n\nif (!window.router) {\n    const configComponent = httpVueLoader('js/templates/config.vue');\n    const notFoundComponent = httpVueLoader('js/templates/http/404.vue');\n\n    const router = new VueRouter({\n        base: document.body.getAttribute('api-root').replace('api/v2/', ''),\n        mode: 'history',\n        routes: Object.assign(routes || [], [{\n            path: '/config',\n            name: 'config',\n            meta: {\n                title: 'Help & Info',\n                header: 'Medusa Configuration'\n            },\n            component: configComponent\n        }, {\n            path: '/not-found',\n            name: 'not-found',\n            meta: {\n                title: '404',\n                header: '404 - page not found'\n            },\n            component: notFoundComponent\n        }, {\n            path: '*',\n            redirect: '/not-found'\n        }])\n    });\n\n    router.beforeEach((to, from, next) => {\n        const { meta } = to;\n        const { title } = meta;\n\n        // If there's no title then it's not a .vue route so skip\n        if (title) {\n            document.title = `${to.meta.title} | Medusa`;\n        }\n\n        // @Note: Always call next otherwise the <router-view> will be empty\n        next();\n    });\n\n    window.router = router;\n}\n\n},{}]},{},[1]);\n"],"file":"router.js"}
\ No newline at end of file
diff --git a/themes/dark/assets/js/templates/config.vue b/themes/dark/assets/js/templates/config.vue
new file mode 100644
index 0000000000..114fe06ed1
--- /dev/null
+++ b/themes/dark/assets/js/templates/config.vue
@@ -0,0 +1,67 @@
+<template>
+    <div id="config-content">
+        <table class="infoTable" cellspacing="1" border="0" cellpadding="0" width="100%">
+            <tr>
+                <td><i class="icon16-config-application"></i> Medusa Info:</td>
+                <td>
+                    Branch:
+                    <span v-if="config.branch"><app-link :href="config.sourceUrl + '/tree/' + config.branch">{{config.branch}}</app-link></span>
+                    <span v-else>Unknown</span>
+                    <br>
+                    Commit:
+                    <span v-if="config.commitHash"><app-link :href="config.sourceUrl + '/commit/' + config.commitHash">{{config.commitHash}}</app-link></span>
+                    <span v-else>Unknown</span>
+                    <br>
+                    Version:
+                    <span v-if="config.release"><app-link :href="config.sourceUrl + '/releases/tag/' + config.release">{{config.release}}</app-link></span>
+                    <span v-else>Unknown</span>
+                    <br>
+                    Database:
+                    <span v-if="config.databaseVersion">{{config.databaseVersion.major}}.{{config.databaseVersion.minor}}</span>
+                    <span v-else>Unknown</span>
+                </td>
+            </tr>
+            <tr><td><i class="icon16-config-python"></i> Python Version:</td><td>{{config.pythonVersion}}</td></tr>
+            <tr><td><i class="icon16-config-ssl"></i> SSL Version:</td><td>{{config.sslVersion}}</td></tr>
+            <tr><td><i class="icon16-config-os"></i> OS:</td><td>{{config.os}}</td></tr>
+            <tr><td><i class="icon16-config-locale"></i> Locale:</td><td>{{config.locale}}</td></tr>
+            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr><td><i class="icon16-config-user"></i> User:</td><td>{{config.localUser}}</td></tr>
+            <tr><td><i class="icon16-config-dir"></i> Program Folder:</td><td>{{config.programDir}}</td></tr>
+            <tr><td><i class="icon16-config-config"></i> Config File:</td><td>{{config.configFile}}</td></tr>
+            <tr><td><i class="icon16-config-db"></i> Database File:</td><td>{{config.dbPath}}</td></tr>
+            <tr><td><i class="icon16-config-cache"></i> Cache Folder:</td><td>{{config.cacheDir}}</td></tr>
+            <tr><td><i class="icon16-config-log"></i> Log Folder:</td><td>{{config.logDir}}</td></tr>
+            <tr v-if="config.appArgs"><td><i class="icon16-config-arguments"></i> Arguments:</td><td><pre>{{prettyPrintJSON(config.appArgs)}}</pre></td></tr>
+            <tr v-if="config.webRoot"><td><i class="icon16-config-folder"></i> Web Root:</td><td>{{config.webRoot}}</td></tr>
+            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr><td><i class="icon16-config-web"></i> Website:</td><td><app-link :href="config.githubUrl">{{config.githubUrl}}</app-link></td></tr>
+            <tr><td><i class="icon16-config-wiki"></i> Wiki:</td><td><app-link :href="config.wikiUrl">{{config.wikiUrl}}</app-link></td></tr>
+            <tr><td><i class="icon16-config-github"></i> Source:</td><td><app-link :href="config.sourceUrl">{{config.sourceUrl}}</app-link></td></tr>
+            <tr><td><i class="icon16-config-mirc"></i> IRC Chat:</td><td><app-link href="irc://irc.freenode.net/#pymedusa"><i>#pymedusa</i> on <i>irc.freenode.net</i></app-link></td></tr>
+        </table>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    name: 'config',
+    store, // eslint-disable-line no-undef
+    computed: {
+        config() {
+            return this.store.state.config;
+        }
+    },
+    methods: {
+        prettyPrintJSON: str => JSON.stringify(str, undefined, 4)
+    }
+};
+</script>
+
+<style>
+.infoTable tr td:first-child {
+  vertical-align: top;
+}
+</style>
diff --git a/themes/dark/assets/js/templates/http/404.vue b/themes/dark/assets/js/templates/http/404.vue
new file mode 100644
index 0000000000..475cfc78bc
--- /dev/null
+++ b/themes/dark/assets/js/templates/http/404.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="align-center">You have reached this page by accident, please check the url.</div>
+</template>
diff --git a/themes/dark/templates/config.mako b/themes/dark/templates/config.mako
deleted file mode 100644
index e2bebc0d0f..0000000000
--- a/themes/dark/templates/config.mako
+++ /dev/null
@@ -1,122 +0,0 @@
-<%inherit file="/layouts/main.mako"/>
-<%block name="scripts">
-<script type="text/x-template" id="config-route-template">
-    <div id="config-content">
-        <table class="infoTable" cellspacing="1" border="0" cellpadding="0" width="100%">
-            <tr>
-                <td><i class="icon16-config-application"></i> Medusa Info:</td>
-                <td>
-                    Branch:
-                    <span v-if="branch"><app-link :href="sourceUrl + '/tree/' + branch">{{branch}}</app-link></span>
-                    <span v-else>Unknown</span>
-                    <br>
-                    Commit:
-                    <span v-if="commitHash"><app-link :href="sourceUrl + '/commit/' + commitHash">{{commitHash}}</app-link></span>
-                    <span v-else>Unknown</span>
-                    <br>
-                    Version:
-                    <span v-if="release"><app-link :href="sourceUrl + '/releases/tag/' + release">{{release}}</app-link></span>
-                    <span v-else>Unknown</span>
-                    <br>
-                    Database:
-                    <span v-if="databaseVersion">{{databaseVersion.major}}.{{databaseVersion.minor}}</span>
-                    <span v-else>Unknown</span>
-                </td>
-            </tr>
-            <tr><td><i class="icon16-config-python"></i> Python Version:</td><td>{{pythonVersion}}</td></tr>
-            <tr><td><i class="icon16-config-ssl"></i> SSL Version:</td><td>{{sslVersion}}</td></tr>
-            <tr><td><i class="icon16-config-os"></i> OS:</td><td>{{os}}</td></tr>
-            <tr><td><i class="icon16-config-locale"></i> Locale:</td><td>{{locale}}</td></tr>
-            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr><td><i class="icon16-config-user"></i> User:</td><td>{{localUser}}</td></tr>
-            <tr><td><i class="icon16-config-dir"></i> Program Folder:</td><td>{{programDir}}</td></tr>
-            <tr><td><i class="icon16-config-config"></i> Config File:</td><td>{{configFile}}</td></tr>
-            <tr><td><i class="icon16-config-db"></i> Database File:</td><td>{{dbPath}}</td></tr>
-            <tr><td><i class="icon16-config-cache"></i> Cache Folder:</td><td>{{cacheDir}}</td></tr>
-            <tr><td><i class="icon16-config-log"></i> Log Folder:</td><td>{{logDir}}</td></tr>
-            <tr v-if="appArgs"><td><i class="icon16-config-arguments"></i> Arguments:</td><td><pre>{{prettyPrintJSON(appArgs)}}</pre></td></tr>
-            <tr v-if="webRoot"><td><i class="icon16-config-folder"></i> Web Root:</td><td>{{webRoot}}</td></tr>
-            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr><td><i class="icon16-config-web"></i> Website:</td><td><app-link :href="githubUrl">{{githubUrl}}</app-link></td></tr>
-            <tr><td><i class="icon16-config-wiki"></i> Wiki:</td><td><app-link :href="wikiUrl">{{wikiUrl}}</app-link></td></tr>
-            <tr><td><i class="icon16-config-github"></i> Source:</td><td><app-link :href="sourceUrl">{{sourceUrl}}</app-link></td></tr>
-            <tr><td><i class="icon16-config-mirc"></i> IRC Chat:</td><td><app-link href="irc://irc.freenode.net/#pymedusa" rel="noreferrer"><i>#pymedusa</i> on <i>irc.freenode.net</i></app-link></td></tr>
-        </table>
-    </div>
-</script>
-<script>
-const component = {
-    name: 'config',
-    metaInfo: {
-        title: 'Help & Info'
-    },
-    template: '#config-route-template',
-    data() {
-        return {
-            appArgs: undefined,
-            branch: undefined,
-            cacheDir: undefined,
-            commitHash: undefined,
-            configFile: undefined,
-            databaseVersion: undefined,
-            dbPath: undefined,
-            githubUrl: undefined,
-            locale: undefined,
-            localUser: undefined,
-            logDir: undefined,
-            os: undefined,
-            programDir: undefined,
-            pythonVersion: undefined,
-            release: undefined,
-            sourceUrl: undefined,
-            sslVersion: undefined,
-            webRoot: undefined,
-            wikiUrl: undefined
-        };
-    },
-    async mounted() {
-        const { data } = await api.get('config/main');
-        this.appArgs = data.appArgs;
-        this.branch = data.branch;
-        this.cacheDir = data.cacheDir;
-        this.commitHash = data.commitHash;
-        this.configFile = data.configFile;
-        this.databaseVersion = data.databaseVersion;
-        this.dbPath = data.dbPath;
-        this.githubUrl = data.githubUrl;
-        this.locale = data.locale;
-        this.localUser = data.localUser;
-        this.logDir = data.logDir;
-        this.os = data.os;
-        this.programDir = data.programDir;
-        this.pythonVersion = data.pythonVersion;
-        this.release = data.release;
-        this.sourceUrl = data.sourceUrl;
-        this.sslVersion = data.sslVersion;
-        this.webRoot = data.webRoot;
-        this.wikiUrl = data.wikiUrl;
-    },
-    methods: {
-        prettyPrintJSON: str => JSON.stringify(str, undefined, 4)
-    }
-};
-
-window.routes.push({
-    path: '/config',
-    component
-});
-</script>
-</%block>
-<%block name="css">
-<style>
-.infoTable tr td:first-child {
-  vertical-align: top;
-}
-</style>
-</%block>
-<%block name="content">
-<h1 class="header">Medusa Configuration</h1>
-<router-view/>
-</%block>
diff --git a/themes/dark/templates/index.mako b/themes/dark/templates/index.mako
index e69de29bb2..672544e1fd 100644
--- a/themes/dark/templates/index.mako
+++ b/themes/dark/templates/index.mako
@@ -0,0 +1,5 @@
+<%inherit file="/layouts/main.mako"/>
+<%block name="content">
+<h1 v-if="$route.meta.header" class="header">{{$route.meta.header}}</h1>
+<router-view></router-view>
+</%block>
diff --git a/themes/dark/templates/layouts/main.mako b/themes/dark/templates/layouts/main.mako
index d128c9cf3b..78d16e0df6 100644
--- a/themes/dark/templates/layouts/main.mako
+++ b/themes/dark/templates/layouts/main.mako
@@ -114,6 +114,7 @@
             ## @NOTE: These will be usable on all pages
         %>
         <script src="js/lib/vue.js"></script>
+        <script src="js/lib/http-vue-loader.js"></script>
         <script src="js/lib/vue-async-computed@3.3.0.js"></script>
         <script src="js/lib/vue-in-viewport-mixin.min.js"></script>
         <script src="js/lib/vue-router.min.js"></script>
@@ -181,19 +182,13 @@
             }
         </script>
         <%block name="scripts" />
+        <script src="js/router.js"></script>
         <script>
-            if (!window.router) {
-                window.router = new vueRouter({
-                    base: document.body.getAttribute('api-root').replace('api/v2/', ''),
-                    mode: 'history',
-                    routes
-                });
-            }
             if (!window.app) {
                 console.info('Loading Vue with router since window.app is missing.');
                 window.app = new Vue({
                     el: '#vue-wrap',
-                    router
+                    router: window.router
                 });
             } else {
                 console.info('Loading local Vue since we found a window.app');
diff --git a/themes/light/assets/js/lib/http-vue-loader.js b/themes/light/assets/js/lib/http-vue-loader.js
new file mode 100644
index 0000000000..6e24a0cdf4
--- /dev/null
+++ b/themes/light/assets/js/lib/http-vue-loader.js
@@ -0,0 +1,470 @@
+(function umd(root,factory){
+	if(typeof module==='object' && typeof exports === 'object' )
+		module.exports=factory()
+	else if(typeof define==='function' && define.amd)
+		define([],factory)
+	else
+		root.httpVueLoader=factory()
+})(this,function factory() {
+	'use strict';
+
+	var scopeIndex = 0;
+
+	StyleContext.prototype = {
+
+		withBase: function(callback) {
+
+			var tmpBaseElt;
+			if ( this.component.baseURI ) {
+
+				// firefox and chrome need the <base> to be set while inserting or modifying <style> in a document.
+				tmpBaseElt = document.createElement('base');
+				tmpBaseElt.href = this.component.baseURI;
+
+				var headElt = this.component.getHead();
+				headElt.insertBefore(tmpBaseElt, headElt.firstChild);
+			}
+
+			callback.call(this);
+
+			if ( tmpBaseElt )
+				this.component.getHead().removeChild(tmpBaseElt);
+		},
+
+		scopeStyles: function(styleElt, scopeName) {
+
+			function process() {
+
+				var sheet = styleElt.sheet;
+				var rules = sheet.cssRules;
+
+				for ( var i = 0; i < rules.length; ++i ) {
+
+					var rule = rules[i];
+					if ( rule.type !== 1 )
+						continue;
+
+					var scopedSelectors = [];
+
+					rule.selectorText.split(/\s*,\s*/).forEach(function(sel) {
+
+						scopedSelectors.push(scopeName+' '+sel);
+						var segments = sel.match(/([^ :]+)(.+)?/);
+						scopedSelectors.push(segments[1] + scopeName + (segments[2]||''));
+					});
+
+					var scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);
+					sheet.deleteRule(i);
+					sheet.insertRule(scopedRule, i);
+				}
+			}
+
+			try {
+				// firefox may fail sheet.cssRules with InvalidAccessError
+				process();
+			} catch (ex) {
+
+				if ( ex instanceof DOMException && ex.code === DOMException.INVALID_ACCESS_ERR ) {
+
+					styleElt.sheet.disabled = true;
+					styleElt.addEventListener('load', function onStyleLoaded() {
+
+						styleElt.removeEventListener('load', onStyleLoaded);
+
+						// firefox need this timeout otherwise we have to use document.importNode(style, true)
+						setTimeout(function() {
+
+							process();
+							styleElt.sheet.disabled = false;
+						});
+					});
+					return;
+				}
+
+				throw ex;
+			}
+		},
+
+		compile: function() {
+
+			var hasTemplate = this.template !== null;
+
+			var scoped = this.elt.hasAttribute('scoped');
+
+			if ( scoped ) {
+
+				// no template, no scopable style needed
+				if ( !hasTemplate )
+					return;
+
+				// firefox does not tolerate this attribute
+				this.elt.removeAttribute('scoped');
+			}
+
+			this.withBase(function() {
+
+				this.component.getHead().appendChild(this.elt);
+			});
+
+			if ( scoped )
+				this.scopeStyles(this.elt, '['+this.component.getScopeId()+']');
+
+			return Promise.resolve();
+		},
+
+		getContent: function() {
+
+			return this.elt.textContent;
+		},
+
+		setContent: function(content) {
+
+			this.withBase(function() {
+
+				this.elt.textContent = content;
+			});
+		}
+	};
+
+	function StyleContext(component, elt) {
+
+		this.component = component;
+		this.elt = elt;
+	}
+
+
+	ScriptContext.prototype = {
+
+		getContent: function() {
+
+			return this.elt.textContent;
+		},
+
+		setContent: function(content) {
+
+			this.elt.textContent = content;
+		},
+
+		compile: function(module) {
+
+			var childModuleRequire = function(childURL) {
+
+				return httpVueLoader.require(resolveURL(this.component.baseURI, childURL));
+			}.bind(this);
+
+			var childLoader = function(childURL, childName) {
+
+				return httpVueLoader(resolveURL(this.component.baseURI, childURL), childName);
+			}.bind(this);
+
+			try {
+				Function('exports', 'require', 'httpVueLoader', 'module', this.getContent()).call(this.module.exports, this.module.exports, childModuleRequire, childLoader, this.module);
+			} catch(ex) {
+
+				if ( !('lineNumber' in ex) ) {
+
+					return Promise.reject(ex);
+				}
+				var vueFileData = responseText.replace(/\r?\n/g, '\n');
+				var lineNumber = vueFileData.substr(0, vueFileData.indexOf(script)).split('\n').length + ex.lineNumber - 1;
+				throw new (ex.constructor)(ex.message, url, lineNumber);
+			}
+
+			return Promise.resolve(this.module.exports);
+		}
+	};
+
+	function ScriptContext(component, elt) {
+
+		this.component = component;
+		this.elt = elt;
+		this.module = { exports:{} };
+	}
+
+
+	TemplateContext.prototype = {
+
+		getContent: function() {
+
+			return this.elt.innerHTML;
+		},
+
+		setContent: function(content) {
+
+			this.elt.innerHTML = content;
+		},
+
+		getRootElt: function() {
+
+			var tplElt = this.elt.content || this.elt;
+
+			if ( 'firstElementChild' in tplElt )
+				return tplElt.firstElementChild;
+
+			for ( tplElt = tplElt.firstChild; tplElt !== null; tplElt = tplElt.nextSibling )
+				if ( tplElt.nodeType === Node.ELEMENT_NODE )
+					return tplElt;
+
+			return null;
+		},
+
+		compile: function() {
+
+			return Promise.resolve();
+		}
+	};
+
+	function TemplateContext(component, elt) {
+
+		this.component = component;
+		this.elt = elt;
+	}
+
+
+
+	Component.prototype = {
+
+		getHead: function() {
+
+			return document.head || document.getElementsByTagName('head')[0];
+		},
+
+		getScopeId: function() {
+
+			if ( this._scopeId === '' ) {
+
+				this._scopeId = 'data-s-' + (scopeIndex++).toString(36);
+				this.template.getRootElt().setAttribute(this._scopeId, '');
+			}
+			return this._scopeId;
+		},
+
+		load: function(componentURL) {
+
+			return httpVueLoader.httpRequest(componentURL)
+			.then(function(responseText) {
+
+				this.baseURI = componentURL.substr(0, componentURL.lastIndexOf('/')+1);
+				var doc = document.implementation.createHTMLDocument('');
+
+				// IE requires the <base> to come with <style>
+				doc.body.innerHTML = (this.baseURI ? '<base href="'+this.baseURI+'">' : '') + responseText;
+
+				for ( var it = doc.body.firstChild; it; it = it.nextSibling ) {
+
+					switch ( it.nodeName ) {
+						case 'TEMPLATE':
+							this.template = new TemplateContext(this, it);
+							break;
+						case 'SCRIPT':
+							this.script = new ScriptContext(this, it);
+							break;
+						case 'STYLE':
+							this.styles.push(new StyleContext(this, it));
+							break;
+					}
+				}
+
+				return this;
+			}.bind(this));
+		},
+
+		_normalizeSection: function(eltCx) {
+
+			var p;
+
+			if ( eltCx === null || !eltCx.elt.hasAttribute('src') ) {
+
+				p = Promise.resolve(null);
+			} else {
+
+				p = httpVueLoader.httpRequest(eltCx.elt.getAttribute('src'))
+				.then(function(content) {
+
+					eltCx.elt.removeAttribute('src');
+					return content;
+				});
+			}
+
+			return p
+			.then(function(content) {
+
+				if ( eltCx !== null && eltCx.elt.hasAttribute('lang') ) {
+
+					var lang = eltCx.elt.getAttribute('lang');
+					eltCx.elt.removeAttribute('lang');
+					return httpVueLoader.langProcessor[lang.toLowerCase()](content === null ? eltCx.getContent() : content);
+				}
+				return content;
+			})
+			.then(function(content) {
+
+				if ( content !== null )
+					eltCx.setContent(content);
+			});
+		},
+
+		normalize: function() {
+
+			return Promise.all(Array.prototype.concat(
+				this._normalizeSection(this.template),
+				this._normalizeSection(this.script),
+				this.styles.map(this._normalizeSection)
+			))
+			.then(function() {
+
+				return this;
+			}.bind(this));
+		},
+
+		compile: function() {
+
+			return Promise.all(Array.prototype.concat(
+				this.template && this.template.compile(),
+				this.script && this.script.compile(),
+				this.styles.map(function(style) { return style.compile(); })
+			))
+			.then(function() {
+
+				return this;
+			}.bind(this));
+		}
+	};
+
+	function Component(name) {
+
+		this.name = name;
+		this.template = null;
+		this.script = null;
+		this.styles = [];
+		this._scopeId = '';
+	}
+
+	function identity(value) {
+
+		return value;
+	}
+
+	function parseComponentURL(url) {
+
+		var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);
+		return {
+			name: comp[2],
+			url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
+		};
+	}
+
+	function resolveURL(baseURL, url) {
+
+		if (url.substr(0, 2) === './' || url.substr(0, 3) === '../') {
+			return baseURL + url;
+		}
+		return url;
+	}
+
+
+	httpVueLoader.load = function(url, name) {
+
+		return function() {
+
+			return new Component(name).load(url)
+			.then(function(component) {
+
+				return component.normalize();
+			})
+			.then(function(component) {
+
+				return component.compile();
+			})
+			.then(function(component) {
+
+				var exports = component.script !== null ? component.script.module.exports : {};
+
+				if ( component.template !== null )
+					exports.template = component.template.getContent();
+
+				if ( exports.name === undefined )
+					if ( component.name !== undefined )
+						exports.name = component.name;
+
+				exports._baseURI = component.baseURI;
+
+				return exports;
+			});
+		};
+	};
+
+
+	httpVueLoader.register = function(Vue, url) {
+
+		var comp = parseComponentURL(url);
+		Vue.component(comp.name, httpVueLoader.load(comp.url));
+	};
+
+	httpVueLoader.install = function(Vue) {
+
+		Vue.mixin({
+
+			beforeCreate: function () {
+
+				var components = this.$options.components;
+
+				for ( var componentName in components ) {
+
+					if ( typeof(components[componentName]) === 'string' && components[componentName].substr(0, 4) === 'url:' ) {
+
+						var comp = parseComponentURL(components[componentName].substr(4));
+
+						var componentURL = ('_baseURI' in this.$options) ? resolveURL(this.$options._baseURI, comp.url) : comp.url;
+
+						if ( isNaN(componentName) )
+							components[componentName] = httpVueLoader.load(componentURL, componentName);
+						else
+							components[componentName] = Vue.component(comp.name, httpVueLoader.load(componentURL, comp.name));
+					}
+				}
+			}
+		});
+	};
+
+	httpVueLoader.require = function(moduleName) {
+
+		return window[moduleName];
+	};
+
+	httpVueLoader.httpRequest = function(url) {
+
+		return new Promise(function(resolve, reject) {
+
+			var xhr = new XMLHttpRequest();
+			xhr.open('GET', url);
+
+			xhr.onreadystatechange = function() {
+
+				if ( xhr.readyState === 4 ) {
+
+					if ( xhr.status >= 200 && xhr.status < 300 )
+						resolve(xhr.responseText);
+					else
+						reject(xhr.status);
+				}
+			};
+
+			xhr.send(null);
+		});
+	};
+
+	httpVueLoader.langProcessor = {
+		html: identity,
+		js: identity,
+		css: identity
+	};
+
+	function httpVueLoader(url, name) {
+
+		var comp = parseComponentURL(url);
+		return httpVueLoader.load(comp.url, name);
+	}
+
+	return httpVueLoader;
+});
diff --git a/themes/light/assets/js/router.js b/themes/light/assets/js/router.js
new file mode 100644
index 0000000000..19200c29cf
--- /dev/null
+++ b/themes/light/assets/js/router.js
@@ -0,0 +1,47 @@
+const VueRouter = window.vueRouter;
+const { routes, httpVueLoader } = window;
+
+if (!window.router) {
+    const configComponent = httpVueLoader('js/templates/config.vue');
+    const notFoundComponent = httpVueLoader('js/templates/http/404.vue');
+
+    const router = new VueRouter({
+        base: document.body.getAttribute('api-root').replace('api/v2/', ''),
+        mode: 'history',
+        routes: Object.assign(routes || [], [{
+            path: '/config',
+            name: 'config',
+            meta: {
+                title: 'Help & Info',
+                header: 'Medusa Configuration'
+            },
+            component: configComponent
+        }, {
+            path: '/not-found',
+            name: 'not-found',
+            meta: {
+                title: '404',
+                header: '404 - page not found'
+            },
+            component: notFoundComponent
+        }, {
+            path: '*',
+            redirect: '/not-found'
+        }])
+    });
+
+    router.beforeEach((to, from, next) => {
+        const { meta } = to;
+        const { title } = meta;
+
+        // If there's no title then it's not a .vue route so skip
+        if (title) {
+            document.title = `${to.meta.title} | Medusa`;
+        }
+
+        // @Note: Always call next otherwise the <router-view> will be empty
+        next();
+    });
+
+    window.router = router;
+}
diff --git a/themes/light/assets/js/router.js.map b/themes/light/assets/js/router.js.map
new file mode 100644
index 0000000000..acb49bb3c4
--- /dev/null
+++ b/themes/light/assets/js/router.js.map
@@ -0,0 +1 @@
+{"version":3,"names":[],"mappings":"","sources":["js/router.js"],"sourcesContent":["(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c=\"function\"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error(\"Cannot find module '\"+i+\"'\");throw a.code=\"MODULE_NOT_FOUND\",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u=\"function\"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){\nconst VueRouter = window.vueRouter;\nconst { routes, httpVueLoader } = window;\n\nif (!window.router) {\n    const configComponent = httpVueLoader('js/templates/config.vue');\n    const notFoundComponent = httpVueLoader('js/templates/http/404.vue');\n\n    const router = new VueRouter({\n        base: document.body.getAttribute('api-root').replace('api/v2/', ''),\n        mode: 'history',\n        routes: Object.assign(routes || [], [{\n            path: '/config',\n            name: 'config',\n            meta: {\n                title: 'Help & Info',\n                header: 'Medusa Configuration'\n            },\n            component: configComponent\n        }, {\n            path: '/not-found',\n            name: 'not-found',\n            meta: {\n                title: '404',\n                header: '404 - page not found'\n            },\n            component: notFoundComponent\n        }, {\n            path: '*',\n            redirect: '/not-found'\n        }])\n    });\n\n    router.beforeEach((to, from, next) => {\n        const { meta } = to;\n        const { title } = meta;\n\n        // If there's no title then it's not a .vue route so skip\n        if (title) {\n            document.title = `${to.meta.title} | Medusa`;\n        }\n\n        // @Note: Always call next otherwise the <router-view> will be empty\n        next();\n    });\n\n    window.router = router;\n}\n\n},{}]},{},[1]);\n"],"file":"router.js"}
\ No newline at end of file
diff --git a/themes/light/assets/js/templates/config.vue b/themes/light/assets/js/templates/config.vue
new file mode 100644
index 0000000000..114fe06ed1
--- /dev/null
+++ b/themes/light/assets/js/templates/config.vue
@@ -0,0 +1,67 @@
+<template>
+    <div id="config-content">
+        <table class="infoTable" cellspacing="1" border="0" cellpadding="0" width="100%">
+            <tr>
+                <td><i class="icon16-config-application"></i> Medusa Info:</td>
+                <td>
+                    Branch:
+                    <span v-if="config.branch"><app-link :href="config.sourceUrl + '/tree/' + config.branch">{{config.branch}}</app-link></span>
+                    <span v-else>Unknown</span>
+                    <br>
+                    Commit:
+                    <span v-if="config.commitHash"><app-link :href="config.sourceUrl + '/commit/' + config.commitHash">{{config.commitHash}}</app-link></span>
+                    <span v-else>Unknown</span>
+                    <br>
+                    Version:
+                    <span v-if="config.release"><app-link :href="config.sourceUrl + '/releases/tag/' + config.release">{{config.release}}</app-link></span>
+                    <span v-else>Unknown</span>
+                    <br>
+                    Database:
+                    <span v-if="config.databaseVersion">{{config.databaseVersion.major}}.{{config.databaseVersion.minor}}</span>
+                    <span v-else>Unknown</span>
+                </td>
+            </tr>
+            <tr><td><i class="icon16-config-python"></i> Python Version:</td><td>{{config.pythonVersion}}</td></tr>
+            <tr><td><i class="icon16-config-ssl"></i> SSL Version:</td><td>{{config.sslVersion}}</td></tr>
+            <tr><td><i class="icon16-config-os"></i> OS:</td><td>{{config.os}}</td></tr>
+            <tr><td><i class="icon16-config-locale"></i> Locale:</td><td>{{config.locale}}</td></tr>
+            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr><td><i class="icon16-config-user"></i> User:</td><td>{{config.localUser}}</td></tr>
+            <tr><td><i class="icon16-config-dir"></i> Program Folder:</td><td>{{config.programDir}}</td></tr>
+            <tr><td><i class="icon16-config-config"></i> Config File:</td><td>{{config.configFile}}</td></tr>
+            <tr><td><i class="icon16-config-db"></i> Database File:</td><td>{{config.dbPath}}</td></tr>
+            <tr><td><i class="icon16-config-cache"></i> Cache Folder:</td><td>{{config.cacheDir}}</td></tr>
+            <tr><td><i class="icon16-config-log"></i> Log Folder:</td><td>{{config.logDir}}</td></tr>
+            <tr v-if="config.appArgs"><td><i class="icon16-config-arguments"></i> Arguments:</td><td><pre>{{prettyPrintJSON(config.appArgs)}}</pre></td></tr>
+            <tr v-if="config.webRoot"><td><i class="icon16-config-folder"></i> Web Root:</td><td>{{config.webRoot}}</td></tr>
+            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
+            <tr><td><i class="icon16-config-web"></i> Website:</td><td><app-link :href="config.githubUrl">{{config.githubUrl}}</app-link></td></tr>
+            <tr><td><i class="icon16-config-wiki"></i> Wiki:</td><td><app-link :href="config.wikiUrl">{{config.wikiUrl}}</app-link></td></tr>
+            <tr><td><i class="icon16-config-github"></i> Source:</td><td><app-link :href="config.sourceUrl">{{config.sourceUrl}}</app-link></td></tr>
+            <tr><td><i class="icon16-config-mirc"></i> IRC Chat:</td><td><app-link href="irc://irc.freenode.net/#pymedusa"><i>#pymedusa</i> on <i>irc.freenode.net</i></app-link></td></tr>
+        </table>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    name: 'config',
+    store, // eslint-disable-line no-undef
+    computed: {
+        config() {
+            return this.store.state.config;
+        }
+    },
+    methods: {
+        prettyPrintJSON: str => JSON.stringify(str, undefined, 4)
+    }
+};
+</script>
+
+<style>
+.infoTable tr td:first-child {
+  vertical-align: top;
+}
+</style>
diff --git a/themes/light/assets/js/templates/http/404.vue b/themes/light/assets/js/templates/http/404.vue
new file mode 100644
index 0000000000..475cfc78bc
--- /dev/null
+++ b/themes/light/assets/js/templates/http/404.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="align-center">You have reached this page by accident, please check the url.</div>
+</template>
diff --git a/themes/light/templates/config.mako b/themes/light/templates/config.mako
deleted file mode 100644
index e2bebc0d0f..0000000000
--- a/themes/light/templates/config.mako
+++ /dev/null
@@ -1,122 +0,0 @@
-<%inherit file="/layouts/main.mako"/>
-<%block name="scripts">
-<script type="text/x-template" id="config-route-template">
-    <div id="config-content">
-        <table class="infoTable" cellspacing="1" border="0" cellpadding="0" width="100%">
-            <tr>
-                <td><i class="icon16-config-application"></i> Medusa Info:</td>
-                <td>
-                    Branch:
-                    <span v-if="branch"><app-link :href="sourceUrl + '/tree/' + branch">{{branch}}</app-link></span>
-                    <span v-else>Unknown</span>
-                    <br>
-                    Commit:
-                    <span v-if="commitHash"><app-link :href="sourceUrl + '/commit/' + commitHash">{{commitHash}}</app-link></span>
-                    <span v-else>Unknown</span>
-                    <br>
-                    Version:
-                    <span v-if="release"><app-link :href="sourceUrl + '/releases/tag/' + release">{{release}}</app-link></span>
-                    <span v-else>Unknown</span>
-                    <br>
-                    Database:
-                    <span v-if="databaseVersion">{{databaseVersion.major}}.{{databaseVersion.minor}}</span>
-                    <span v-else>Unknown</span>
-                </td>
-            </tr>
-            <tr><td><i class="icon16-config-python"></i> Python Version:</td><td>{{pythonVersion}}</td></tr>
-            <tr><td><i class="icon16-config-ssl"></i> SSL Version:</td><td>{{sslVersion}}</td></tr>
-            <tr><td><i class="icon16-config-os"></i> OS:</td><td>{{os}}</td></tr>
-            <tr><td><i class="icon16-config-locale"></i> Locale:</td><td>{{locale}}</td></tr>
-            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr><td><i class="icon16-config-user"></i> User:</td><td>{{localUser}}</td></tr>
-            <tr><td><i class="icon16-config-dir"></i> Program Folder:</td><td>{{programDir}}</td></tr>
-            <tr><td><i class="icon16-config-config"></i> Config File:</td><td>{{configFile}}</td></tr>
-            <tr><td><i class="icon16-config-db"></i> Database File:</td><td>{{dbPath}}</td></tr>
-            <tr><td><i class="icon16-config-cache"></i> Cache Folder:</td><td>{{cacheDir}}</td></tr>
-            <tr><td><i class="icon16-config-log"></i> Log Folder:</td><td>{{logDir}}</td></tr>
-            <tr v-if="appArgs"><td><i class="icon16-config-arguments"></i> Arguments:</td><td><pre>{{prettyPrintJSON(appArgs)}}</pre></td></tr>
-            <tr v-if="webRoot"><td><i class="icon16-config-folder"></i> Web Root:</td><td>{{webRoot}}</td></tr>
-            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr class="infoTableSeperator"><td>&nbsp;</td><td>&nbsp;</td></tr>
-            <tr><td><i class="icon16-config-web"></i> Website:</td><td><app-link :href="githubUrl">{{githubUrl}}</app-link></td></tr>
-            <tr><td><i class="icon16-config-wiki"></i> Wiki:</td><td><app-link :href="wikiUrl">{{wikiUrl}}</app-link></td></tr>
-            <tr><td><i class="icon16-config-github"></i> Source:</td><td><app-link :href="sourceUrl">{{sourceUrl}}</app-link></td></tr>
-            <tr><td><i class="icon16-config-mirc"></i> IRC Chat:</td><td><app-link href="irc://irc.freenode.net/#pymedusa" rel="noreferrer"><i>#pymedusa</i> on <i>irc.freenode.net</i></app-link></td></tr>
-        </table>
-    </div>
-</script>
-<script>
-const component = {
-    name: 'config',
-    metaInfo: {
-        title: 'Help & Info'
-    },
-    template: '#config-route-template',
-    data() {
-        return {
-            appArgs: undefined,
-            branch: undefined,
-            cacheDir: undefined,
-            commitHash: undefined,
-            configFile: undefined,
-            databaseVersion: undefined,
-            dbPath: undefined,
-            githubUrl: undefined,
-            locale: undefined,
-            localUser: undefined,
-            logDir: undefined,
-            os: undefined,
-            programDir: undefined,
-            pythonVersion: undefined,
-            release: undefined,
-            sourceUrl: undefined,
-            sslVersion: undefined,
-            webRoot: undefined,
-            wikiUrl: undefined
-        };
-    },
-    async mounted() {
-        const { data } = await api.get('config/main');
-        this.appArgs = data.appArgs;
-        this.branch = data.branch;
-        this.cacheDir = data.cacheDir;
-        this.commitHash = data.commitHash;
-        this.configFile = data.configFile;
-        this.databaseVersion = data.databaseVersion;
-        this.dbPath = data.dbPath;
-        this.githubUrl = data.githubUrl;
-        this.locale = data.locale;
-        this.localUser = data.localUser;
-        this.logDir = data.logDir;
-        this.os = data.os;
-        this.programDir = data.programDir;
-        this.pythonVersion = data.pythonVersion;
-        this.release = data.release;
-        this.sourceUrl = data.sourceUrl;
-        this.sslVersion = data.sslVersion;
-        this.webRoot = data.webRoot;
-        this.wikiUrl = data.wikiUrl;
-    },
-    methods: {
-        prettyPrintJSON: str => JSON.stringify(str, undefined, 4)
-    }
-};
-
-window.routes.push({
-    path: '/config',
-    component
-});
-</script>
-</%block>
-<%block name="css">
-<style>
-.infoTable tr td:first-child {
-  vertical-align: top;
-}
-</style>
-</%block>
-<%block name="content">
-<h1 class="header">Medusa Configuration</h1>
-<router-view/>
-</%block>
diff --git a/themes/light/templates/index.mako b/themes/light/templates/index.mako
index e69de29bb2..672544e1fd 100644
--- a/themes/light/templates/index.mako
+++ b/themes/light/templates/index.mako
@@ -0,0 +1,5 @@
+<%inherit file="/layouts/main.mako"/>
+<%block name="content">
+<h1 v-if="$route.meta.header" class="header">{{$route.meta.header}}</h1>
+<router-view></router-view>
+</%block>
diff --git a/themes/light/templates/layouts/main.mako b/themes/light/templates/layouts/main.mako
index d128c9cf3b..78d16e0df6 100644
--- a/themes/light/templates/layouts/main.mako
+++ b/themes/light/templates/layouts/main.mako
@@ -114,6 +114,7 @@
             ## @NOTE: These will be usable on all pages
         %>
         <script src="js/lib/vue.js"></script>
+        <script src="js/lib/http-vue-loader.js"></script>
         <script src="js/lib/vue-async-computed@3.3.0.js"></script>
         <script src="js/lib/vue-in-viewport-mixin.min.js"></script>
         <script src="js/lib/vue-router.min.js"></script>
@@ -181,19 +182,13 @@
             }
         </script>
         <%block name="scripts" />
+        <script src="js/router.js"></script>
         <script>
-            if (!window.router) {
-                window.router = new vueRouter({
-                    base: document.body.getAttribute('api-root').replace('api/v2/', ''),
-                    mode: 'history',
-                    routes
-                });
-            }
             if (!window.app) {
                 console.info('Loading Vue with router since window.app is missing.');
                 window.app = new Vue({
                     el: '#vue-wrap',
-                    router
+                    router: window.router
                 });
             } else {
                 console.info('Loading local Vue since we found a window.app');