Global configuration is not used

[jmsanzg]

I'm submitting a....

[X] Bug report
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• Vue.js version : 3.2.37
• Browser name and version : Chrome 105.0
• This package version : 5.0.3

Current behavior
Defining a global/default configuration doesn't work.

Expected behavior
Define global / default configuration that will be used by every instance of loading created.

Minimal reproduction of the problem with instructions

Inside main.js file:

import App from 'App.vue'
import VueLoading from "vue-loading-overlay"
import 'vue-loading-overlay/dist/vue-loading.css'
...
app.use(createPinia())
   .use(router)
   .use(VueLoading, { color: '#4862A0', backgroundColor: '#000000', opacity: 0.8 }, {})
   .provide('axios', axios)
   .mount('#app');

Inside my component:

<script setup>
import { useLoading } from 'vue-loading-overlay'
import { onMounted, inject, ref } from 'vue'
const loading = useLoading();
const axios = inject('axios');
const items = ref([]);

onMounted(async () => {
    const loader = loading.show(); // The loader works BUT it takes the default config, not the one defined by me
    try {
        let res = await axios.get('/api/private/xxxxx/');
        items.value = res.data;
    } catch (error) {
    }
    loader.hide();
})
</script>

[ankurk91]

Duplicate of
#106