diff --git a/src/nginxconfig/templates/domain_sections/https.vue b/src/nginxconfig/templates/domain_sections/https.vue
index b82dbbd..6f88542 100644
--- a/src/nginxconfig/templates/domain_sections/https.vue
+++ b/src/nginxconfig/templates/domain_sections/https.vue
@@ -35,7 +35,9 @@ THE SOFTWARE.
                     <div :class="`control${httpsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="https" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.https.enableEncryptedSslConnection') }}
                             </PrettyCheck>
                         </div>
@@ -53,7 +55,9 @@ THE SOFTWARE.
                     <div :class="`control${http2Changed ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="http2" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.https.enableHttp2Connections') }}
                             </PrettyCheck>
                         </div>
@@ -71,7 +75,9 @@ THE SOFTWARE.
                     <div :class="`control${http3Changed ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="http3" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.https.enableHttp3Connections') }}
                             </PrettyCheck>
                         </div>
@@ -107,7 +113,9 @@ THE SOFTWARE.
                     <div :class="`control${forceHttpsChanged ? ' is-changed' : ''}`">
                         <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>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 (http://{{ $parent.$props.data.server.domain.computed }}
                                 <i class="fas fa-long-arrow-alt-right"></i>
                                 https://{{ $parent.$props.data.server.domain.computed }})
@@ -127,7 +135,9 @@ THE SOFTWARE.
                     <div :class="`control${hstsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="hsts" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.https.enableStrictTransportSecurity') }}
                             </PrettyCheck>
                         </div>
@@ -136,7 +146,9 @@ THE SOFTWARE.
                     <div v-if="hstsSubdomainsEnabled" :class="`control${hstsSubdomainsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="hstsSubdomains" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.https.enableIncludeSubDomains') }}
                             </PrettyCheck>
                         </div>
@@ -145,7 +157,9 @@ THE SOFTWARE.
                     <div v-if="hstsPreloadEnabled" :class="`control${hstsPreloadChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="hstsPreload" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.https.enablePreload') }}
                             </PrettyCheck>
                         </div>
@@ -166,7 +180,9 @@ THE SOFTWARE.
                     >
                         <div class="radio">
                             <PrettyRadio v-model="certType" :value="value" class="p-default p-round p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t(name) }}
                             </PrettyRadio>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/logging.vue b/src/nginxconfig/templates/domain_sections/logging.vue
index a63400e..c00b3c0 100644
--- a/src/nginxconfig/templates/domain_sections/logging.vue
+++ b/src/nginxconfig/templates/domain_sections/logging.vue
@@ -35,7 +35,9 @@ THE SOFTWARE.
                     <div :class="`control${accessLogChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="accessLog" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.logging.enableForThisDomain') }}
                             </PrettyCheck>
                         </div>
@@ -53,7 +55,9 @@ THE SOFTWARE.
                     <div :class="`control${errorLogChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="errorLog" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.logging.enableForThisDomain') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/php.vue b/src/nginxconfig/templates/domain_sections/php.vue
index 2256509..85c76e6 100644
--- a/src/nginxconfig/templates/domain_sections/php.vue
+++ b/src/nginxconfig/templates/domain_sections/php.vue
@@ -56,7 +56,9 @@ THE SOFTWARE.
                     <div :class="`control${phpChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="php" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.php.enablePhp') }}
                             </PrettyCheck>
                         </div>
@@ -126,7 +128,9 @@ THE SOFTWARE.
                     <div :class="`control${wordPressRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="wordPressRules" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.php.enableWordPressRules') }}
                             </PrettyCheck>
                         </div>
@@ -144,7 +148,9 @@ THE SOFTWARE.
                     <div :class="`control${drupalRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="drupalRules" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.php.enableDrupalRules') }}
                             </PrettyCheck>
                         </div>
@@ -162,7 +168,9 @@ THE SOFTWARE.
                     <div :class="`control${magentoRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="magentoRules" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.php.enableMagentoRules') }}
                             </PrettyCheck>
                         </div>
@@ -180,7 +188,9 @@ THE SOFTWARE.
                     <div :class="`control${joomlaRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="joomlaRules" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.php.enableJoomlaRules') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/python.vue b/src/nginxconfig/templates/domain_sections/python.vue
index 8957e3d..84bfa23 100644
--- a/src/nginxconfig/templates/domain_sections/python.vue
+++ b/src/nginxconfig/templates/domain_sections/python.vue
@@ -56,7 +56,9 @@ THE SOFTWARE.
                     <div :class="`control${pythonChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="python" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.python.enablePython') }}
                             </PrettyCheck>
                         </div>
@@ -74,7 +76,9 @@ THE SOFTWARE.
                     <div :class="`control${djangoRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="djangoRules" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.python.enableDjangoRules') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/restrict.vue b/src/nginxconfig/templates/domain_sections/restrict.vue
index 9f11a81..41603b1 100644
--- a/src/nginxconfig/templates/domain_sections/restrict.vue
+++ b/src/nginxconfig/templates/domain_sections/restrict.vue
@@ -37,7 +37,9 @@ THE SOFTWARE.
                             <div :class="`control${getMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="getMethod" class="p-default p-curve p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -54,7 +56,9 @@ THE SOFTWARE.
                             <div :class="`control${postMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="postMethod" class="p-default p-curve p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -71,7 +75,9 @@ THE SOFTWARE.
                             <div :class="`control${putMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="putMethod" class="p-default p-curve p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -88,7 +94,9 @@ THE SOFTWARE.
                             <div :class="`control${patchMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="patchMethod" class="p-default p-curve p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -105,7 +113,9 @@ THE SOFTWARE.
                             <div :class="`control${deleteMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="deleteMethod" class="p-default p-curve p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -124,7 +134,9 @@ THE SOFTWARE.
                             <div :class="`control${headMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="headMethod" class="p-default p-curve p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -141,7 +153,9 @@ THE SOFTWARE.
                             <div :class="`control${connectMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="connectMethod" class="p-default p-curve p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -158,7 +172,9 @@ THE SOFTWARE.
                             <div :class="`control${optionsMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="optionsMethod" class="p-default p-curve p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
@@ -175,7 +191,9 @@ THE SOFTWARE.
                             <div :class="`control${traceMethodChanged ? ' is-changed' : ''}`">
                                 <div class="checkbox">
                                     <PrettyCheck v-model="traceMethod" class="p-default p-curve p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t('templates.domainSections.restrict.disableForThisDomain') }}
                                     </PrettyCheck>
                                 </div>
diff --git a/src/nginxconfig/templates/domain_sections/reverse_proxy.vue b/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
index 53cf40b..f08f471 100644
--- a/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
+++ b/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
@@ -56,7 +56,9 @@ THE SOFTWARE.
                     <div class="control">
                         <div class="checkbox">
                             <PrettyCheck v-model="reverseProxy" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.reverseProxy.enableReverseProxy') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/routing.vue b/src/nginxconfig/templates/domain_sections/routing.vue
index 3f8afa6..bb0071f 100644
--- a/src/nginxconfig/templates/domain_sections/routing.vue
+++ b/src/nginxconfig/templates/domain_sections/routing.vue
@@ -35,7 +35,9 @@ THE SOFTWARE.
                     <div :class="`control${rootChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="root" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('common.enable') }}
                             </PrettyCheck>
                         </div>
@@ -56,7 +58,9 @@ THE SOFTWARE.
                     >
                         <div class="radio">
                             <PrettyRadio v-model="index" :value="value" class="p-default p-round p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ value }}
                             </PrettyRadio>
                         </div>
@@ -74,7 +78,9 @@ THE SOFTWARE.
                     <div v-if="fallbackHtmlEnabled" :class="`control${fallbackHtmlChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="fallbackHtml" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 index.html
                             </PrettyCheck>
                         </div>
@@ -82,7 +88,9 @@ THE SOFTWARE.
                     <div v-if="fallbackPhpEnabled" :class="`control${fallbackPhpChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="fallbackPhp" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 index.php
                             </PrettyCheck>
                         </div>
@@ -118,7 +126,9 @@ THE SOFTWARE.
                     <div :class="`control${legacyPhpRoutingChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="legacyPhpRouting" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.domainSections.routing.enableLegacyRouting') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/domain_sections/server.vue b/src/nginxconfig/templates/domain_sections/server.vue
index 90b98e3..e3810cf 100644
--- a/src/nginxconfig/templates/domain_sections/server.vue
+++ b/src/nginxconfig/templates/domain_sections/server.vue
@@ -70,7 +70,9 @@ THE SOFTWARE.
                     <div :class="`control${wwwSubdomainChanged ? ' is-changed' : ''}`">
                         <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>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 (www.{{ $props.data.domain.computed }})
                             </PrettyCheck>
                         </div>
@@ -88,7 +90,9 @@ THE SOFTWARE.
                     <div :class="`control${cdnSubdomainChanged ? ' is-changed' : ''}`">
                         <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>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 (cdn.{{ $props.data.domain.computed }})
                             </PrettyCheck>
                         </div>
@@ -106,7 +110,9 @@ THE SOFTWARE.
                     <div :class="`control${redirectSubdomainsChanged ? ' is-changed' : ''}`">
                         <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>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 ({{ wwwSubdomain ? `${domain}, ` : '' }}*.{{ $props.data.domain.computed }}
                                 <i class="fas fa-long-arrow-alt-right"></i>
                                 {{ wwwSubdomain ? 'www.' : '' }}{{ $props.data.domain.computed }})
diff --git a/src/nginxconfig/templates/global_sections/docker.vue b/src/nginxconfig/templates/global_sections/docker.vue
index 954e38c..a96a690 100644
--- a/src/nginxconfig/templates/global_sections/docker.vue
+++ b/src/nginxconfig/templates/global_sections/docker.vue
@@ -52,7 +52,9 @@ THE SOFTWARE.
                     <div :class="`control${dockerfileChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="dockerfile" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.docker.includeDockerfile') }}
                             </PrettyCheck>
                         </div>
@@ -69,7 +71,9 @@ THE SOFTWARE.
                     <div :class="`control${dockerComposeChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="dockerCompose" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.docker.includeDockerCompose') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/global_sections/https.vue b/src/nginxconfig/templates/global_sections/https.vue
index 6030d4a..cdd8402 100644
--- a/src/nginxconfig/templates/global_sections/https.vue
+++ b/src/nginxconfig/templates/global_sections/https.vue
@@ -35,7 +35,9 @@ THE SOFTWARE.
                     <div :class="`control${portReuseChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="portReuse" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.https.enableReuseOfPort') }}
                             </PrettyCheck>
                         </div>
@@ -73,7 +75,9 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="sslProfile" :value="value" class="p-default p-round p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
@@ -92,7 +96,9 @@ THE SOFTWARE.
                         <div :class="`control${ocspCloudflareChanged ? ' is-changed' : ''}`">
                             <div class="checkbox">
                                 <PrettyCheck v-model="ocspCloudflare" class="p-default p-curve p-fill p-icon">
-                                    <i slot="extra" class="icon fas fa-check"></i>
+                                    <template #extra>
+                                        <i class="icon fas fa-check"></i>
+                                    </template>
                                     {{ $t('templates.globalSections.https.cloudflareResolver') }}
                                 </PrettyCheck>
                             </div>
@@ -104,7 +110,9 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="ocspCloudflareType" :value="value" class="p-default p-round p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
@@ -114,7 +122,9 @@ THE SOFTWARE.
                         <div :class="`control${ocspGoogleChanged ? ' is-changed' : ''}`">
                             <div class="checkbox">
                                 <PrettyCheck v-model="ocspGoogle" class="p-default p-curve p-fill p-icon">
-                                    <i slot="extra" class="icon fas fa-check"></i>
+                                    <template #extra>
+                                        <i class="icon fas fa-check"></i>
+                                    </template>
                                     {{ $t('templates.globalSections.https.googlePublicDns') }}
                                 </PrettyCheck>
                             </div>
@@ -126,7 +136,9 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="ocspGoogleType" :value="value" class="p-default p-round p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
@@ -136,7 +148,9 @@ THE SOFTWARE.
                         <div :class="`control${ocspOpenDnsChanged ? ' is-changed' : ''}`">
                             <div class="checkbox">
                                 <PrettyCheck v-model="ocspOpenDns" class="p-default p-curve p-fill p-icon">
-                                    <i slot="extra" class="icon fas fa-check"></i>
+                                    <template #extra>
+                                        <i class="icon fas fa-check"></i>
+                                    </template>
                                     {{ $t('templates.globalSections.https.openDns') }}
                                 </PrettyCheck>
                             </div>
@@ -148,7 +162,9 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="ocspOpenDnsType" :value="value" class="p-default p-round p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
@@ -158,7 +174,9 @@ THE SOFTWARE.
                         <div :class="`control${ocspQuad9Changed ? ' is-changed' : ''}`">
                             <div class="checkbox">
                                 <PrettyCheck v-model="ocspQuad9" class="p-default p-curve p-fill p-icon">
-                                    <i slot="extra" class="icon fas fa-check"></i>
+                                    <template #extra>
+                                        <i class="icon fas fa-check"></i>
+                                    </template>
                                     {{ $t('templates.globalSections.https.quad9') }}
                                 </PrettyCheck>
                             </div>
@@ -170,7 +188,9 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="ocspQuad9Type" :value="value" class="p-default p-round p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
@@ -180,7 +200,9 @@ THE SOFTWARE.
                         <div :class="`control${ocspVerisignChanged ? ' is-changed' : ''}`">
                             <div class="checkbox">
                                 <PrettyCheck v-model="ocspVerisign" class="p-default p-curve p-fill p-icon">
-                                    <i slot="extra" class="icon fas fa-check"></i>
+                                    <template #extra>
+                                        <i class="icon fas fa-check"></i>
+                                    </template>
                                     {{ $t('templates.globalSections.https.verisign') }}
                                 </PrettyCheck>
                             </div>
@@ -192,7 +214,9 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="ocspVerisignType" :value="value" class="p-default p-round p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
diff --git a/src/nginxconfig/templates/global_sections/logging.vue b/src/nginxconfig/templates/global_sections/logging.vue
index 108c599..434d480 100644
--- a/src/nginxconfig/templates/global_sections/logging.vue
+++ b/src/nginxconfig/templates/global_sections/logging.vue
@@ -71,7 +71,9 @@ THE SOFTWARE.
                     <div :class="`control${logNotFoundChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="logNotFound" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.logging.enableFileNotFoundErrorLogging') }} error_log
                             </PrettyCheck>
                         </div>
@@ -89,7 +91,9 @@ THE SOFTWARE.
                     <div v-if="cloudflareEnabled" :class="`control${cloudflareChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cloudflare" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.logging.enableCloudflare') }}
                             </PrettyCheck>
                         </div>
@@ -97,7 +101,9 @@ THE SOFTWARE.
                     <div v-if="cfRayEnabled" :class="`control${cfRayChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cfRay" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.logging.cfRay') }}
                             </PrettyCheck>
                         </div>
@@ -105,7 +111,9 @@ THE SOFTWARE.
                     <div v-if="cfConnectingIpEnabled" :class="`control${cfConnectingIpChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cfConnectingIp" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.logging.cfConnectingIp') }}
                             </PrettyCheck>
                         </div>
@@ -113,7 +121,9 @@ THE SOFTWARE.
                     <div v-if="xForwardedForEnabled" :class="`control${xForwardedForChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="xForwardedFor" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.logging.xForwardedFor') }}
                             </PrettyCheck>
                         </div>
@@ -121,7 +131,9 @@ THE SOFTWARE.
                     <div v-if="xForwardedProtoEnabled" :class="`control${xForwardedProtoChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="xForwardedProto" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.logging.xForwardedProto') }}
                             </PrettyCheck>
                         </div>
@@ -129,7 +141,9 @@ THE SOFTWARE.
                     <div v-if="trueClientIpEnabled" :class="`control${trueClientIpChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="trueClientIp" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.logging.trueClientIp') }}
                             </PrettyCheck>
                         </div>
@@ -137,7 +151,9 @@ THE SOFTWARE.
                     <div v-if="cfIpCountryEnabled" :class="`control${cfIpCountryChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cfIpCountry" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.logging.cfIpCountry') }}
                             </PrettyCheck>
                         </div>
@@ -145,7 +161,9 @@ THE SOFTWARE.
                     <div v-if="cfVisitorEnabled" :class="`control${cfVisitorChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cfVisitor" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.logging.cfVisitor') }}
                             </PrettyCheck>
                         </div>
@@ -153,7 +171,9 @@ THE SOFTWARE.
                     <div v-if="cdnLoopEnabled" :class="`control${cdnLoopChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cdnLoop" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.logging.cdnLoop') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/global_sections/performance.vue b/src/nginxconfig/templates/global_sections/performance.vue
index e5c10f0..31b922c 100644
--- a/src/nginxconfig/templates/global_sections/performance.vue
+++ b/src/nginxconfig/templates/global_sections/performance.vue
@@ -35,7 +35,9 @@ THE SOFTWARE.
                     <div :class="`control${gzipCompressionChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="gzipCompression" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.performance.enableGzipCompression') }}
                             </PrettyCheck>
                         </div>
@@ -53,7 +55,9 @@ THE SOFTWARE.
                     <div :class="`control${brotliCompressionChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="brotliCompression" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.performance.enableBrotliCompression') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/global_sections/reverse_proxy.vue b/src/nginxconfig/templates/global_sections/reverse_proxy.vue
index b52682f..beab448 100644
--- a/src/nginxconfig/templates/global_sections/reverse_proxy.vue
+++ b/src/nginxconfig/templates/global_sections/reverse_proxy.vue
@@ -130,7 +130,9 @@ THE SOFTWARE.
                             >
                                 <div class="radio">
                                     <PrettyRadio v-model="proxyCoexistenceXForwarded" :value="value" class="p-default p-round p-fill p-icon">
-                                        <i slot="extra" class="icon fas fa-check"></i>
+                                        <template #extra>
+                                            <i class="icon fas fa-check"></i>
+                                        </template>
                                         {{ $t(name) }}
                                     </PrettyRadio>
                                 </div>
diff --git a/src/nginxconfig/templates/global_sections/security.vue b/src/nginxconfig/templates/global_sections/security.vue
index 5a08f9e..d9d7368 100644
--- a/src/nginxconfig/templates/global_sections/security.vue
+++ b/src/nginxconfig/templates/global_sections/security.vue
@@ -96,7 +96,9 @@ THE SOFTWARE.
                     <div :class="`control${serverTokensChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="serverTokens" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('common.enable') }}
                             </PrettyCheck>
                         </div>
@@ -114,7 +116,9 @@ THE SOFTWARE.
                     <div :class="`control${limitReqChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="limitReq" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('common.enable') }}
                             </PrettyCheck>
                         </div>
@@ -132,7 +136,9 @@ THE SOFTWARE.
                     <div :class="`control${securityTxt ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="securityTxt" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('common.enable') }}
                             </PrettyCheck>
                         </div>
diff --git a/src/nginxconfig/templates/global_sections/tools.vue b/src/nginxconfig/templates/global_sections/tools.vue
index f5c6177..1e29f0e 100644
--- a/src/nginxconfig/templates/global_sections/tools.vue
+++ b/src/nginxconfig/templates/global_sections/tools.vue
@@ -35,7 +35,9 @@ THE SOFTWARE.
                     <div :class="`control${modularizedStructureChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="modularizedStructure" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.tools.enableModularizedConfigFiles') }}
                             </PrettyCheck>
                         </div>
@@ -53,7 +55,9 @@ THE SOFTWARE.
                     <div :class="`control${symlinkVhostChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="symlinkVhost" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
+                                <template #extra>
+                                    <i class="icon fas fa-check"></i>
+                                </template>
                                 {{ $t('templates.globalSections.tools.enableSymLinksFrom') }} sites-available/
                                 {{ $t('templates.globalSections.tools.to') }} sites-enabled/
                             </PrettyCheck>