From 75f4a54f7ef63951a8ce93b0a37fac1aec26a2f9 Mon Sep 17 00:00:00 2001 From: Daniil Chudo Date: Mon, 10 Oct 2022 14:12:36 +0400 Subject: [PATCH] feat(nuxt): add default slot to `` (#7128) Co-authored-by: Alexander Lichter --- docs/content/3.api/2.components/4.nuxt-loading-indicator.md | 4 ++++ packages/nuxt/src/app/components/nuxt-loading-indicator.ts | 4 ++-- 2 files changed, 6 insertions(+), 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 index 7209f48232..c95f449118 100644 --- 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 `` 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 index 391c9ce891..30cfc82e8b 100644 --- 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) } })