Add support to custom loaders? about vue-loading-overlay

[ankurk91]

This is documented here
https://github.com/ankurk91/vue-loading-overlay#vueloadingshowpropsdataslots

// Pass slots by their names
  default: this.$createElement('your-custom-loader-component-name'),

You can find the working example in examples folder as well.

[chris]

This may be obvious to others with more Vue experience than me. Also, I'm using Nuxt, which may mean this is a bit different. But here's how I did it:

1. Create a new component that is some SVG you want for your loader. In my case it was a fully custom animation and graphic in the SVG, so I didn't need any custom props. e.g. in a LogoLoader.vue file:

   <template>
     <svg ...>
   </template>
   
   <script>
   export default {
     name: 'Logo',
   }
   </script>
   

2. Add the component in the page/template I was using it on:

   import LogoLoader from '~/components/LogoLoader.vue'
   
   export default {
     components: {
       Loader,
       LogoLoader,
     }
   }
   

3. Specify the custom loader via slot, in component use:

   <loading
     :active.sync="isLoading"
     :is-full-page="loader.fullPage"
   >
     <LogoLoader />
   </loading>