i created a nuxt plugin to use the simple-jsonrpc-js package together with the nuxt auth plugin. Now i can access it with this.$jsonApi.call()
to perform a request to the server with my token provided by nuxt/auth.
I use it in many components within my nuxt app so i wanted to create an error handler for my plugin by wrapping _jrpc.call()
in a try-catch block. Because im using Vuetify i want to show a snackbar component with the content of the error Message. Currently my code looks like this:
async call<T = Response<any>>(method: string, data: object = {}): Promise<T> {
const token = this.accessTokenFactory()
try {
return await this._jrpc.call(method, {
token: token,
data
})
} catch (e:any) {
const ComponentClass = Vue.extend(VSnackbar)
const instance = new ComponentClass()
instance.$slots.default = [e.message]
instance.$mount()
document.querySelector('body')?.appendChild(instance.$el)
}
}
But when i get an error from my api, i get this error from the catch block
Which comes from the vuetify component code:
const {
bar,
bottom,
footer,
insetFooter,
left,
right,
top,
} = this.$vuetify.application
My guess is that the Vue instance i am using doesn’t have the this.$vuetify.application
becuase its not the same as the Vue instance used by the nuxt application…
That’s why im asking: how do i access the same Vue instance in Nuxt when injecting a plugin? The Nuxt docs arent helping and i haven’t found a similar question.
Thanks in advance for helping