feat(nuxt, schema): official @vueuse/head v1 support

[harlan-zw]

🔗 Linked issue

Remake of PR #8908 (comment)

• inject <script> in rendered HTML when ssr: false nuxt#14172

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

New Nuxt v3 projects are already using v1 @vueuse/head outside of this PR. There are no open issues for the v1 release currently.

This PR aims to:

• not using the deprecated functions
• fix tag generation in SPA mode inject <script> in rendered HTML when ssr: false nuxt#14172

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

Basic documentation, will need continued work over the coming weeks. I've kept the two new composable undocumented for the initial release, shouldn't be an issue for now?

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

❌ Deploy Preview for nuxt3-docs failed.

Name	Link
🔨 Latest commit	18aab25
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6373a8067d418b0009be40ee

[harlan-zw]

No idea why this is being generated

[harlan-zw]

Ready for review, I'll write a couple of tests soon

[pi0]

Thanks so much for working on this @harlan-zw 💯 I will have a local look soon but overall unhead migration seems already in good direction.

Since we are so close to latest RC and v3 release, i think it is good idea to consider including this change and release fixes in upstream if any. Only, i would appreciate if we can minimize new feature additions to reduce chances of breaking changes for end-users.

[harlan-zw]

Thanks so much for working on this @harlan-zw 100 I will have a local look soon but overall unhead migration seems already in good direction.

Since we are so close to latest RC and v3 release, i think it is good idea to consider including this change and release fixes in upstream if any. Only, i would appreciate if we can minimize new feature additions to reduce chances of breaking changes for end-users.

Good idea, will remove anything non-essential. I can release a module to opt-in to these new features

[pi0]

Overall looks good to me! Let's try changes on Nuxt edge.

[nathanchase]

It doesn't seem that useHead updates on computed properties.

Example:

const pageTitle = computed(() =>
  route.params.query
    ? `🔍 Search results for "${route.params.query}"`
    : '🔍 Search',
);

useHead({
  title: pageTitle.value,
});

Even if pageTitle correctly includes the variable, the page title never updates.

[tylerforesthauser]

I think you have to use just the computed ref. So use pageTitle not pageTitle.value.

[nathanchase]

I think you have to use just the computed ref. So use pageTitle not pageTitle.value.

Ah, of course. Thank you.