如何替换Nuxt 3默认页面加载动画？

已解决说明 #

该问题已得到解答，感谢@ReaganM！

背景 #

我们正在基于Nuxt 3 / Vue 3 / TypeScript构建Web应用，想要替换页面加载/刷新时的Nuxt默认加载指示器（动画Nuxt标志），并且已经定义好了自定义加载指示器组件。

期望效果 #

页面加载或刷新时，加载指示器呈现为自定义样式（带有动画效果，动画为次要需求）。

已尝试方案 #

• 按照官方文档添加<NuxtLoadingIndicator />，但页面加载时未显示。
• 参照Nuxt 2文档在nuxt.config.ts中配置自定义加载指示器，两种方案均无效：
  • 方案a)（非首选，仅测试用）

    export default defineNuxtConfig({
        css: ['vuetify/lib/styles/main.sass'],
        ssr: false,
        //@ts-ignore
        loadingIndicator: {
        name: 'chasing-dots',
        color: '#604081',
        background: '#ffffff'
      }
      // 更多配置...
    })
    

  • 方案b)

    export default defineNuxtConfig({
        css: ['vuetify/lib/styles/main.sass'],
        ssr: false,
        //@ts-ignore
        loading: '~/components/general/LoadingIndicator.vue',
        // 更多配置...
    })
    

• 尝试使用应用钩子page: start和page: finish，但未成功。

自定义加载组件代码 #

LoadingIndicator.vue：

<template>
    <div 
        v-if="loading"
        id="loadingIndicator" 
        ref="loadingIndicator" 
        class="loadingIndicator text-center" 
        :style="'margin-top: ' + this.computedYposition + 'px; margin-left: ' + this.computedXposition + 'px'"
    >
        <div class="loadingIndicatorAnimation">
            <img src="~/assets/images/Loader.svg" width="104" height="70">
        </div>
        <div class="text-center loadingText">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            windowHeight: document.documentElement.clientHeight,
            computedXposition: 0,
            computedYposition: 0,
            loading: false
        };
    },
    mounted() {
        window.addEventListener('resize', this.getWindowDimensions);
        this.centerLoadingIndicator();
    },
    unmounted() {
        window.removeEventListener('resize', this.getWindowDimensions);
    },
    methods: {
        getWindowDimensions() {
            this.windowHeight = document.documentElement.clientHeight;
            this.centerLoadingIndicator();
        },
        centerLoadingIndicator() {
            this.computedYposition = '-' + ((this.$refs.loadingIndicator.clientHeight / 2));
            this.computedXposition = '-' + ((this.$refs.loadingIndicator.clientWidth / 2));
        },
        start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    },
}
</script>

<style scoped>
.loadingIndicator
{
    width: 150px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
}

.loadingIndicatorAnimation
{
    -webkit-animation: pulse 2s linear infinite;
    animation: pulse 2s linear infinite;
    opacity: 0.1;
}

@-webkit-keyframes pulse 
{
  50% { opacity: 1; }
}

@keyframes pulse 
{
  50% { opacity: 1; }
}

.loadingText
{
    margin-top: 10px;
    color: #999;
}
</style>

恳请各位帮忙解决此问题！（我刚接触Nuxt/Vue，还请多多包涵 :) ）

内容的提问来源于stack exchange，提问作者DSC