Open kdbagwe opened 1 year ago
Hey! I know it might be late, but after looking deeper, I found you can access it with two different ways. I personnally prefer the second one which i think is easier to reuse.
<script setup lang="ts">
// in AnyComponent.vue
import { getCurrentInstance } from 'vue'
const app = getCurrentInstance()
const progress = app?.appContext.config.globalProperties.$progress
</script>
// in main.ts or main.js
import { createApp } from 'vue'
import Vue3Progress from "vue3-progress"
const app = createApp(App)
app.use(router)
.use(Vue3Progress)
.provide('progressbar', app.config.globalProperties.$progress)
.mount('#app')
At this point, you can just inject the property in every component you wish to use it:
<script setup lang="ts">
// in AnyComponent.vue
import { inject } from 'vue'
const progress = inject('progressbar')
</script>
Thanks for the response. Even I had found similar approach on the internet
On Fri, Jan 20, 2023 at 3:00 PM Mawyn NHEK @.***> wrote:
Hey ! I know I might be late, but after looking deeper, I found you can access it with two different ways. I personnally prefer the second one which i think is easier to reuse. GetCurrentInstance function
By providing the $progress property
// in main.ts or main.js import { createApp } from 'vue' import Vue3Progress from "vue3-progress"
const app = createApp(App)
app.use(router) .use(Vue3Progress) .provide('progressbar', app.config.globalProperties.$progress) .mount('#app')
At this point, you can just inject the property in every component you wish to use it:
— Reply to this email directly, view it on GitHub https://github.com/tangyouge/vue3-progress/issues/10#issuecomment-1398128856, or unsubscribe https://github.com/notifications/unsubscribe-auth/AICMZ3ILFLHT4APEDKR6NYTWTJLJPANCNFSM6AAAAAASVRSF5Y . You are receiving this because you authored the thread.Message ID: @.***>
How can I access this.$progress inside method as this keyword is not available inside ???