feat(nuxt): add default slot to <NuxtLoadingIndicator> (#7128)

Co-authored-by: Alexander Lichter <github@lichter.io>
nuxt · Oct 10, 2022 · 75f4a54 · 75f4a54
1 parent e94c3b3
commit 75f4a54
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/docs/content/3.api/2.components/4.nuxt-loading-indicator.md b/docs/content/3.api/2.components/4.nuxt-loading-indicator.md
@@ -19,6 +19,10 @@ Add `<NuxtLoadingIndicator/>` in your `app.vue` or layouts.
 
 :button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/routing/pages?terminal=dev&file=/app.vue" blank}
 
+## Slots
+
+You can pass custom HTML or components through the loading indicator's default slot.
+
 ## Props
 
 - **color**: The color of the loading bar.

diff --git a/packages/nuxt/src/app/components/nuxt-loading-indicator.ts b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
@@ -21,7 +21,7 @@ export default defineComponent({
       default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)'
     }
   },
-  setup (props) {
+  setup (props, { slots }) {
     const indicator = useLoadingIndicator({
       duration: props.duration,
       throttle: props.throttle
@@ -50,7 +50,7 @@ export default defineComponent({
         transition: 'width 0.1s, height 0.4s, opacity 0.4s',
         zIndex: 999999
       }
-    })
+    }, slots)
   }
 })