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

Code before:
            </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,
        },
        http2: {
            default: true,
            enabled: true,
        },
        http3: {

Review comment (suggestion):
I think it'd make more sense to link to the NGINX tech preview here primarily (https://quic.nginx.org/README). You could also link to the Cloudflare quiche patch as an alternative, alongside the NGINX link -- e.g:

HTTP/3 isn't a standard NGINX module, check the [NGINX QUIC readme](https://quic.nginx.org/README) or the [Cloudflare quiche project](https://github.com/cloudflare/quiche/tree/master/extras/nginx) for how to build NGINX with HTTP/3!

(Please also note the slight wording changes here to make the sentence flow better :)

Code after:
        </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';

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