🚧 play with nuxt indicator

fumeapp · Oct 8, 2023 · 6b9193c · 6b9193c
1 parent a488d62
commit 6b9193c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 18 deletions.
diff --git a/client/app.vue b/client/app.vue
@@ -6,10 +6,10 @@ useApi().setNuxtApp(useNuxtApp())
 <template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
  <nuxt-layout>
+ <NuxtLoadingIndicator :color="color" />
  <header-bar />
  <layout-bread-crumbs>
  <u-container>
- <NuxtLoadingIndicator /> <!-- here -->
  <nuxt-page />
  </u-container>
  </layout-bread-crumbs>

diff --git a/client/lib/api.ts b/client/lib/api.ts
@@ -124,10 +124,8 @@ export default class Api {
  Referer: this.config.webURL,
  }
  fetchOptions.method = method
- if (this.nuxtApp) {
- fetchOptions.onRequest = () => this.nuxtApp?.callHook('page:start').catch(() => { })
- fetchOptions.onResponse = () => this.nuxtApp?.callHook('page:finish').catch(() => { })
- }
+ fetchOptions.onRequest = () => this.nuxtApp?.callHook('page:start')
+ fetchOptions.onResponse = () => this.nuxtApp?.callHook('page:finish')
  fetchOptions.onResponseError = this.toastError
  delete this.config.fetchOptions.body
  delete this.config.fetchOptions.params

diff --git a/client/pages/index.vue b/client/pages/index.vue
@@ -13,14 +13,15 @@ const get = async () => {
 }
 const error = async () => await useApi().get('/error')
 
-get()
+const start = () => {
+ useNuxtApp().callHook('page:start').catch(() => { })
+}
 
-const test = () => {
- useToast().add({
- icon: 'i-mdi-alert',
- title: 'this is a test',
- })
+const finish = () => {
+ useNuxtApp().callHook('page:finish').catch(() => { })
 }
+
+onMounted(get)
 </script>
 
 <template>
@@ -37,13 +38,10 @@ const test = () => {
  <span>&nbsp;</span>
  <span class="text-sm">(1 second delay)</span>
  <div class="mt-4 flex justify-center space-x-2">
- <u-button @click="get" :loading="loading" icon="i-mdi-refresh">
- get()
- </u-button>
- <u-button @click="test">toast test </u-button>
- <u-button @click="error" color="red" icon="i-mdi-error">
- Force PHP Error
- </u-button>
+ <u-button @click="get" :loading="loading" icon="i-mdi-refresh" labe="get()" />
+ <u-button @click="start" label="start" />
+ <u-button @click="finish" label="finish" />
+ <u-button @click="error" color="red" icon="i-mdi-error" label="Force PHP Error" />
  </div>
  </div>
  </div>