vueuse/head

Vue 2.7 usage

Closed this issue · 3 comments

rudolfbyker commented

Thanks for this great package. :)

The README at https://github.com/vueuse/head#vue-2 says to do this:

import Vue from 'vue'
import { createHead, HeadVuePlugin } from "@vueuse/head"

const head = createHead()
Vue.use(HeadVuePlugin, head)
Vue.use(head)

new Vue({
  render: h => h(App),
}).$mount('#app')

This causes the following error in my browser when running yarn serve:

TypeError: app.provide is not a function

And this error in jest unit tests:

[Vue warn]: provide() can only be used inside setup().

In one of the previous release candidate branches that I was using (I think RC 14), I had this, which worked, although it required a ts-ignore:

const head = createHead();
Vue.use(HeadVuePlugin);

new Vue({
  // @ts-ignore
  head,
  render: h => h(App),
}).$mount('#app')

This still works with 1.0.10.

In summary:

  • The docs might be wrong.
  • Having to use @ts-ignore is not nice.
rudolfbyker commented

One more difference: RC14 worked with my unit tests, while 1.0.10 causes Jest to exit with code 1, but no error message, even when I use the --verbose flag. I'm still trying to figure out why.

rudolfbyker commented

I did not manage to find the root cause, so I reverted to RC14, which is working well.

harlan-zw commented

Hey @rudolfbyker

Thanks for the issue and apologies for the delay in response, looks like I missed it.

I've pushed up a fix for the error that is being thrown (v1.0.20). As for the additional TS/jest errors, I'm not too sure if they'll be resolved but happy to look further into them if you can confirm they're still an issue.