How to register the Vue plugin correctly?

[ptlithoz]

When using unhead in vue I get a warning in the console but setting the title works like expected:

[Vue warn]: inject() can only be used inside setup() or functional components.
Unhead is missing Vue context, falling back to shared context. This may have unexpected results.

There is a Q&A ( #210 ) that suggests using setHeadInjectionHandler(() => head) but the official documentation ( https://unhead.unjs.io/setup/vue/installation#demos ) says I should use app.use(head). I've tested both versions and both work.

This is how I should do it (as far as I understand the documentation) and setting the title works like expected but I get the warning.

// accourding to documentation
import { createApp } from "vue";
import { createHead } from "@unhead/vue";
import App from "./App.vue";

const app = createApp(App);
const head = createHead();
app.use(head);
app.mount("#app");

This is what the Q&A suggests and I don't get a warning and setting the title works like expected. But since it is very different from what the documentation says I'm unsure if I should use it.

// according to Q&A
import { createApp } from "vue";
import { createHead, setHeadInjectionHandler } from "@unhead/vue";
import App from "./App.vue";

const app = createApp(App);
const head = createHead();
setHeadInjectionHandler(() => head)
app.mount("#app");

[firu11]

Same here!
I'm unsure if that's a good practice but it gets the job done by removing the warning.

[hackel]

@harlan-zw Could you comment on what is going on here, and whether using setHeadInjectionHandler instead of app.use is indeed the correct solution? Because it's undocumented, it feels like a workaround and there should be some other way to fix this issue. Thank you!

[harlan-zw]

The context issue is solved in v2 which is currently in alpha. There's a migration guide here: https://unhead-unjs-io.nuxt.dev/docs/migration