Repository: digitalocean/nginxconfig.io
File: src/nginxconfig/templates/domain_sections/https.vue (Vue)

Code before:
                               class="input"
                               type="text"
                               :placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.crt`"
                        />
                    </div>
                </div>
            </div>
        </div>

        <div v-if="sslCertificateKeyEnabled" class="field is-horizontal">
            <div class="field-label">
                <label class="label">ssl_certificate_key</label>
            </div>
            <div class="field-body">
                <div class="field">
                    <div :class="`control${sslCertificateKeyChanged ? ' is-changed' : ''}`">
                        <input v-model="sslCertificateKey"
                               class="input"
                               type="text"
                               :placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.key`"
                        />
                    </div>
                </div>
            </div>
        </div>
        <template v-if="$props.data.http3.value === true">
            <br />
            <div class="message is-warning">
                <div class="message-body">
                    {{ $t('templates.globalSections.https.http3Warning1') }}
                    <ExternalLink :text="$t('templates.globalSections.https.http3Warning2')"
                                  link="https://github.com/cloudflare/quiche/tree/master/extras/nginx"
                    ></ExternalLink>
                    {{ $t('templates.globalSections.https.http3Warning3') }}
                </div>
            </div>
        </template>
    </div>
</template>

<script>
    import PrettyCheck from 'pretty-checkbox-vue/check';
    import PrettyRadio from 'pretty-checkbox-vue/radio';
    import delegatedFromDefaults from '../../util/delegated_from_defaults';
    import computedFromDefaults from '../../util/computed_from_defaults';
    import ExternalLink from 'do-vue/src/templates/external_link';

    const defaults = {
        https: {
            default: true,
            enabled: true,

Review comment (suggestion):
```suggestion

        <template v-if="$props.data.http3.computed">
```
Linebreak + use the computed value so that the notice doesn't show if portuse is enabled but http3 is disabled + don't need to compare to `true`, as true is truthy.

Code after:
                               type="text"
                               :placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.crt`"
                        />
                    </div>
                </div>
            </div>
        </div>

        <div v-if="sslCertificateKeyEnabled" class="field is-horizontal">
            <div class="field-label">
                <label class="label">ssl_certificate_key</label>
            </div>
            <div class="field-body">
                <div class="field">
                    <div :class="`control${sslCertificateKeyChanged ? ' is-changed' : ''}`">
                        <input v-model="sslCertificateKey"
                               class="input"
                               type="text"
                               :placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.key`"
                        />
                    </div>
                </div>
            </div>
        </div>

        <template v-if="$props.data.http3.value">
            <br />
            <div class="message is-warning">
                <div class="message-body">
                    {{ $t('templates.globalSections.https.http3Warning1') }}
                    <ExternalLink :text="$t('templates.globalSections.https.http3Warning2')"
                                  link="https://quic.nginx.org/README"
                    ></ExternalLink>
                    {{ $t('templates.globalSections.https.http3Warning3') }}
                    <ExternalLink :text="$t('templates.globalSections.https.http3Warning4')"
                                  link="https://github.com/cloudflare/quiche/tree/master/extras/nginx"
                    ></ExternalLink>
                    {{ $t('templates.globalSections.https.http3Warning5') }}
                </div>
            </div>
        </template>
    </div>
</template>

<script>
    import PrettyCheck from 'pretty-checkbox-vue/check';
    import PrettyRadio from 'pretty-checkbox-vue/radio';
    import ExternalLink from 'do-vue/src/templates/external_link';
    import delegatedFromDefaults from '../../util/delegated_from_defaults';
    import computedFromDefaults from '../../util/computed_from_defaults';