Help with imports in UMD

[viniciusccarvalho]

Hi folks, I'm having a hard time on my UMD quasar app with order of my imports (my JS knowledge is limited, so please bear with me)

I have setup an external script to handle common axios stuff:

// import { Notify } from 'quasar' this doesn't work

export const api = axios.create({})

api.interceptors.response.use(response => response ,
    error => {
        if(error.response.status == 401) {
            window.location.href = "/auth"
        } else if(error.response.status == 403) {
            window.location.href = "/forbidden"
        } else {
           //TODO global notification should go here
        }
    });

export default api;

My pages are then created using this script block:

<script type="module">
        import { globals } from '/public/js/modules/global.js'
        import { api } from '/public/js/modules/api.js'

        const app = Vue.createApp({
            data() {
                return {
                    value : null
                }
            },
            methods: {
                test() {
                    api.post("/api/test").then(response => this.value = response.data)
                }
            }
    });
        app.use(Quasar, {config: {}})
        app.config.globalProperties.$globals = globals
        app.mount('#q-app')

</script>

The redirection stuff is working, which is great, but I can't get to refer to the Notify from the api.js (It looks like I'm on a circular dependency here, sorry not much context).

How could I fix this? I would like to have all interceptors configured externally so all my pages can benefit from that.

Thank you very much folks

[yusufkandemir]

Just like you are not importing Vue and Quasar, you'll do a similar thing with Notify as well.

https://quasar.dev/start/umd#quasar-global-object

// No import
Quasar.Notify.create({
  message: 'test'
})