searchanddisplace-core/resources/js/components/Home/Home.vue

<template>
    <div class="wrap">
        <template v-if=" ! error">
            <template v-if=" ! fileUploaded">
                <template v-if=" ! uploading">
                    <Panel header="Please upload a file">
                        <FileUpload
                            name="demo[]"
                            :customUpload="true"
                            :auto="true"
                            @uploader="uploadFile"
                        >
                            <template #empty>
                                <p>Drag and drop files to here to upload.</p>
                            </template>
                        </FileUpload>
                    </Panel>

                    <BlockUI :blocked="uiBlocked" :fullScreen="true"></BlockUI>
                </template>

                <template v-else>
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                </template>
            </template>

            <template v-else>
                <process-file :file="uploadResult"
                              :searchers="searchers"
                              @newFile="uploadNewFile"
                              @error="onError">
                </process-file>
            </template>
        </template>

        <template v-else>
            <h1> Something went wrong while processing. </h1>

            <p> {{ error }} </p>

            <a href="/">
                <button type="button" class="p-button p-button-primary">
                    Try another file
                </button>
            </a>
        </template>
    </div>
</template>

<script lang="ts" src="./Home.ts"></script>