diff --git a/package.json b/package.json
index dc4e33e52..1a5f1da18 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "marked": "3.0.4",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
+    "ufo": "^0.7.9",
     "verte": "0.0.12",
     "vue": "2.6.14",
     "vue-advanced-cropper": "1.8.2",
diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
index 7274586ce..2ae173c28 100644
--- a/src/components/misc/api-config.vue
+++ b/src/components/misc/api-config.vue
@@ -46,6 +46,8 @@
 </template>
 
 <script>
+import { parseURL } from 'ufo'
+
 const API_DEFAULT_PORT = 3456
 
 export default {
@@ -65,13 +67,7 @@ export default {
 	},
 	computed: {
 		apiDomain() {
-			if (window.API_URL.startsWith('/api/v1')) {
-				return window.location.host
-			}
-			const urlParts = window.API_URL.replace('http://', '')
-				.replace('https://', '')
-				.split(/[/?#]/)
-			return urlParts[0]
+			return parseURL(this.apiUrl).host
 		},
 	},
 	methods: {
diff --git a/yarn.lock b/yarn.lock
index 9ed895d7b..040969f7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7226,6 +7226,11 @@ typo-js@*:
   resolved "https://registry.yarnpkg.com/typo-js/-/typo-js-1.2.0.tgz#dbe58de3a6dcbbe260b78bf290ee761b008a28e8"
   integrity sha512-dELuLBVa2jvWdU/CHTKi2L/POYaRupv942k+vRsFXsM17acXesQGAiGCio82RW7fvcr7bkuD/Zj8XpUh6aPC2A==
 
+ufo@^0.7.9:
+  version "0.7.9"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.7.9.tgz#0268e3734b413c9ed6f3510201f42372821b875c"
+  integrity sha512-6t9LrLk3FhqTS+GW3IqlITtfRB5JAVr5MMNjpBECfK827W+Vh5Ilw/LhTcHWrt6b3hkeBvcbjx4Ti7QVFzmcww==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"