I am not able to use this package in axios

[saadabdurrazaq]

This is my code in main.js file:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/web-api'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Pagination from 'v-pagination-3';
import VueProgressBar from "@aacassandra/vue3-progressbar";

const options = {
    color: "#bffaf3",
    failedColor: "red",
    thickness: "5px",
    transition: {
        speed: "0.2s",
        opacity: "0.6s",
        termination: 300,
    },
    autoRevert: true,
    location: "top",
    inverse: false,
};

const app = createApp(App)
app.use(VueProgressBar, options)
app.use(router)
app.use(VueProgressBar, {
    color: 'rgb(143, 255, 199)',
    failedColor: 'red',
    height: '2px'
})
axios.defaults.baseURL = 'http://localhost/my-project/laravue';

axios.interceptors.request.use((config) => {
    this.$Progress.start(); // for every request start the progress
    return config;
});

axios.interceptors.response.use((response) => {
    this.$Progress.finish(); // finish when a response is received
    return response;
});

It produce an error TypeError: Cannot read property '$Progress' of undefined at eval (main.js?56d7:81)

[RihanArfan]

Use app.config.globalProperties.$Progress.start() instead of this.$Progress.start(). The same applies for finish.

[aacassandra]

like @LeCodeCo said, you can try with using app.config.globalProperties.$Progress.start()

[saadabdurrazaq]

Yes. It's working with this way. Thanks

[aacassandra]

nice 🎉