T
TanStack•3y ago
like-gold

I cannot install vue-query with Vue.use using @vue/compat

Hi, I've been trying to find a solution for a few hours now and I'm just really stuck on this one. I'm currently in the process of converting our Vue 2.7 codebase to Vue 3 using @vue/compat but I cannot get vue-query to install properly. Because I cannot switch vue-i18n to the Vue 3 version without reconverting all of my modules first I decided to keep the Vue 2 version for now. That means I have to use Vue.use to install plugins. However I can't get vue-query to install that way, it seems like there's something that is not working with vue-demi and vue/compat because it was working just fine on Vue 2.7 and my other Vue 2 plugins are installed properly with Vue.use. This is the error I'm getting: No 'queryClient' found in Vue context, use 'VueQueryPlugin' to properly initialize the library. This is the install code: 
Vue.use(VueQueryPlugin);
const { default: FormElement } = await import('./Views/FormElement.vue');
    
new Vue({
  name: 'Form',
  i18n,
  components: { FormElement },
  render: h => h(FormElement, {props: { processId, readOnly }})
}).$mount(mountPoint);
Vue.use(VueQueryPlugin);
const { default: FormElement } = await import('./Views/FormElement.vue');
    
new Vue({
  name: 'Form',
  i18n,
  components: { FormElement },
  render: h => h(FormElement, {props: { processId, readOnly }})
}).$mount(mountPoint);
versions: 
"vue": "^3.2.47",
"@vue/compat": "^3.2.47",
"@tanstack/vue-query": "^4.19.1",
"vue": "^3.2.47",
"@vue/compat": "^3.2.47",
"@tanstack/vue-query": "^4.19.1",
1 Reply
like-gold
like-goldOP•3y ago
I wasn't able to get it working so I ended up converting all of my components initialization to use Vue 3's createApp

Did you find this page helpful?