Repository: digitalocean/nginxconfig.io
File: src/nginxconfig/templates/global_sections/performance.vue (Vue)

Code before:
                    <div :class="`control${svgExpirationChanged ? ' is-changed' : ''}`">
                        <input
                            v-model="svgExpiration"
                            class="input"
                            type="text"
                            :placeholder="$props.data.svgExpiration.default"
                        />
                    </div>
                </div>
            </div>
        </div>



    </div>
</template>

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

    const defaults = {
        disableHtmlCaching: {
            default: true,
            enabled: true,
        },
        gzipCompression: {
            default: true,
            enabled: true,
        },
        brotliCompression: {
            default: false,
            enabled: true,
        },
        assetsExpiration: {
            default: '7d',
            enabled: true,
        },
        mediaExpiration: {
            default: '7d',
            enabled: true,
        },
        svgExpiration: {
            default: '7d',
            enabled: true,
        },
        fontsExpiration: {
            default: '7d',
            enabled: true,

Review comment (suggestion):
```suggestion
            default: false,
```
To ensure backwards compatibility in the tool, let's set this to false by default

Code after:
                            v-model="svgExpiration"
                            class="input"
                            type="text"
                            :placeholder="$props.data.svgExpiration.default"
                        />
                    </div>
                </div>
            </div>
        </div>

        <div class="field is-horizontal">
            <div class="field-label">
                <label class="label">{{ $t('templates.globalSections.performance.expirationForFonts') }}</label>
            </div>
            <div class="field-body">
                <div class="field">
                    <div :class="`control${fontsExpirationChanged ? ' is-changed' : ''}`">
                        <input
                            v-model="fontsExpiration"
                            class="input"
                            type="text"
                            :placeholder="$props.data.fontsExpiration.default"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

    const defaults = {
        disableHtmlCaching: {
            default: false,
            enabled: true,
        },
        gzipCompression: {
            default: true,
            enabled: true,
        },
        brotliCompression: {
            default: false,
            enabled: true,
        },
        assetsExpiration: {
            default: '7d',