diff --git a/src/nginxconfig/templates/domain_sections/https.vue b/src/nginxconfig/templates/domain_sections/https.vue
index e76ddbd..d77f265 100644
--- a/src/nginxconfig/templates/domain_sections/https.vue
+++ b/src/nginxconfig/templates/domain_sections/https.vue
@@ -46,9 +46,9 @@
                         <div class="checkbox">
                             <PrettyCheck v-model="forceHttps" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
-                                (http://{{ $parent.$props.data.server.domain.value }}
+                                (http://{{ $parent.$props.data.server.domain.computed }}
                                 <i class="fas fa-long-arrow-alt-right"></i>
-                                https://{{ $parent.$props.data.server.domain.value }})
+                                https://{{ $parent.$props.data.server.domain.computed }})
                             </PrettyCheck>
                         </div>
                     </div>
@@ -122,7 +122,7 @@
                         <input v-model="letsEncryptEmail"
                                class="input"
                                type="text"
-                               :placeholder="`info@${$parent.$props.data.server.domain.value}`"
+                               :placeholder="`info@${$parent.$props.data.server.domain.computed}`"
                         />
                     </div>
                 </div>
@@ -139,7 +139,7 @@
                         <input v-model="sslCertificate"
                                class="input"
                                type="text"
-                               :placeholder="`/etc/nginx/ssl/${$parent.$props.data.server.domain.value}.crt`"
+                               :placeholder="`/etc/nginx/ssl/${$parent.$props.data.server.domain.computed}.crt`"
                         />
                     </div>
                 </div>
@@ -156,7 +156,7 @@
                         <input v-model="sslCertificateKey"
                                class="input"
                                type="text"
-                               :placeholder="`/etc/nginx/ssl/${$parent.$props.data.server.domain.value}.key`"
+                               :placeholder="`/etc/nginx/ssl/${$parent.$props.data.server.domain.computed}.key`"
                         />
                     </div>
                 </div>
diff --git a/src/nginxconfig/templates/domain_sections/server.vue b/src/nginxconfig/templates/domain_sections/server.vue
index 9d8d8d1..de831f0 100644
--- a/src/nginxconfig/templates/domain_sections/server.vue
+++ b/src/nginxconfig/templates/domain_sections/server.vue
@@ -33,7 +33,7 @@
                         <div class="checkbox">
                             <PrettyCheck v-model="wwwSubdomain" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
-                                (www.{{ domain }})
+                                (www.{{ $props.data.domain.computed }})
                             </PrettyCheck>
                         </div>
                     </div>
@@ -51,7 +51,7 @@
                         <div class="checkbox">
                             <PrettyCheck v-model="cdnSubdomain" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
-                                (cdn.{{ domain }})
+                                (cdn.{{ $props.data.domain.computed }})
                             </PrettyCheck>
                         </div>
                     </div>
@@ -69,9 +69,9 @@
                         <div class="checkbox">
                             <PrettyCheck v-model="redirectSubdomains" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
-                                ({{ wwwSubdomain ? `${domain}, ` : '' }}*.{{ domain }}
+                                ({{ wwwSubdomain ? `${domain}, ` : '' }}*.{{ $props.data.domain.computed }}
                                 <i class="fas fa-long-arrow-alt-right"></i>
-                                {{ wwwSubdomain ? 'www.' : '' }}{{ domain }})
+                                {{ wwwSubdomain ? 'www.' : '' }}{{ $props.data.domain.computed }})
                             </PrettyCheck>
                         </div>
                     </div>
@@ -168,6 +168,22 @@
         },
         computed: computedFromDefaults(defaults, 'server'), // Getters & setters for the delegated data
         watch: {
+            '$props.data.domain': {
+                handler(data) {
+                    // This might cause recursion, but seems not to
+
+                    // Ignore www. if given
+                    if (data.computed.startsWith('www.')) {
+                        data.computed = data.computed.slice(4);
+                    }
+
+                    // Use default if empty
+                    if (!data.computed.trim()) {
+                        data.computed = data.default;
+                    }
+                },
+                deep: true,
+            },
             // Only allow CDN when WWW is enabled first
             '$props.data.wwwSubdomain': {
                 handler(data) {