feat: `@vueuse/head` v1 #8908

harlan-zw · 2022-11-11T09:29:50Z

🔗 Linked issue

❓ 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

Read the v1 @vueuse/head post for context https://harlanzw.com/blog/vue-use-head-v1

Nuxt & @vueuse/head

I have pushed this PR up to try and get it in before the v3 stable.

The DOM patching logic is more complex than the previous implementation and it's quite possible there are issues that won't be uncovered until wide testing. So while my personal testing has gone quite well, I'll leave this as a draft PR until I have a playground ready and can do some more testing.

Next Steps

In terms of development, once this is merged then I can look at implementing the rest of the new features unlocked by this:

add shortcut composables (includes useTagMetaFlat, solves the Meta SEO of this discussion)
add useServerHead, opens the door for 0kb runtime head
expose hooks, this will be powerful for module authors

Migration Guide

(copied from the release notes)

⚠️ Breaking changes are minimal, but there are some changes to be aware of.

Please report any issues you find and they will fixed be promptly.

You may consider using @unhead/vue directly if you don't need @vueuse/head.

Verify your tags

The new DOM patching algorithm has not been tested in all possible scenarios, it's possible that there are unforeseen edge cases.

`htmlAttrs` and `bodyAttrs` merge strategy

If you had built your code around with the assumption that setting htmlAttrs or bodyAttrs would clear the old tags, this is now different.

// old
useHead({
  htmlAttrs: {
    class: 'my-class',
  },
})

useHead({
  htmlAttrs: {
    class: 'new-class',
  },
})

// <html class="new-class">

// new
useHead({
  htmlAttrs: {
    class: 'my-class',
  },
})

useHead({
  htmlAttrs: {
    class: 'new-class',
  },
})

// <html class="my-class new-class">

Check the documentation to learn more.

Duplicate tags in the same entry allowed

To make duplicate tag handling more intuitive, duplicate tags are now allowed in the same entry.

Having these metas across useHead's will still dedupe as before.

// old
useHead({
  meta: [
    { name: 'description', content: 'foo' },
    { name: 'description', content: 'bar' },
  ],
})

// only the last tag is rendered
// <meta name="description" content="bar">

// old
useHead({
  meta: [
    { name: 'description', content: 'foo' },
    { name: 'description', content: 'bar' },
  ],
})

// both are rendered
// <meta name="description" content="foo">
// <meta name="description" content="bar">

📝 Checklist

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

codesandbox · 2022-11-11T09:29:53Z

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

netlify · 2022-11-11T09:29:56Z

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	`0bf2cc9`
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/636f5754f022f800070a365c

harlan-zw · 2022-11-11T09:34:25Z

packages/schema/src/types/meta.ts

@@ -29,70 +29,3 @@ export type AppHeadMetaObject = MetaObjectRaw & {
   */
  viewport?: string
 }
-
-export interface MetaObject {


I couldn't figure out why this needed to be exposed by @nuxt/schema exactly. The reactive object is only passed used as an argument for the useHead function, nuxt.config.ts uses the non-reactive schema.

The nuxt app itself exposes it as well. If we remove it then we don't need to depend on import the full module for the types

…e-vue-use-next

harlan-zw · 2022-11-11T12:19:53Z

Will need to revisit this tomorrow. Tests are looking good still but issues with this CI and getting a module up for a playground

harlan-zw · 2022-11-12T08:22:40Z

I figured that having a proper v1 of @vueuse/head would help move this PR along, so it's now released.

The first draft of documentation for https://unhead.harlanzw.com/ is complete.

What's remaining is for me to spin up a playground and do some final nuxt-specific testing with edge cases, I hope to have that done by this time tomorrow. Aim to have it in a RC if the code is good

harlan-zw · 2022-11-13T03:14:50Z

Looks like I goofed up with the v1 release, didn't realise the constraint would jump from rc to 1.0.0. So in fact the nuxt core is now using v1 @vueuse/head for any new installs.

I updated it to be fully backwards compatible to unblock any users, so this PR will now just be switching over from the deprecated functions

manniL · 2022-11-14T09:37:53Z

@harlan-zw Will you release a v2 shortly then removing backwards compat?

harlan-zw · 2022-11-14T11:26:20Z

@harlan-zw Will you release a v2 shortly then removing backwards compat?

Nope, seems a backwards compat build for v3 stable is ideal, there are some ecosystem dependencies that also rely on the old API. (vuetify)

feat: @vueuse/head next

f72222a

chore: fix PR artifact

e2de07b

harlan-zw commented Nov 11, 2022

View reviewed changes

harlan-zw added 4 commits November 11, 2022 20:35

chore: fix PR artifact

c2245d0

chore: fix PR artifact

71a4a2b

chore: add @unhead/ssr as explicit dep

adb9960

chore: move @unhead/schema to a dep

8517567

harlan-zw mentioned this pull request Nov 11, 2022

refactor(nuxt)!: move head option support into defineNuxtComponent #8901

Merged

7 tasks

harlan-zw added 5 commits November 11, 2022 20:49

chore: sync lock file

e10b784

chore: fix broken type

f730b25

Merge branch 'main' of github.com:nuxt/framework into feat/meta-modul…

8062a00

…e-vue-use-next

chore: bump @vueuse/head

dc99d52

chore: fix build maybe

d5ecce3

harlan-zw changed the title ~~feat: @vueuse/head next~~ feat: @vueuse/head v1 Nov 12, 2022

chore: bump to @vueuse/head v1

0bf2cc9

harlan-zw closed this Nov 14, 2022

harlan-zw mentioned this pull request Nov 14, 2022

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

Merged

7 tasks

danielroe added the 3.x label Jan 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: `@vueuse/head` v1 #8908

feat: `@vueuse/head` v1 #8908

harlan-zw commented Nov 11, 2022 •

edited

codesandbox bot commented Nov 11, 2022

netlify bot commented Nov 11, 2022 •

edited

harlan-zw Nov 11, 2022 •

edited

harlan-zw commented Nov 11, 2022

harlan-zw commented Nov 12, 2022

harlan-zw commented Nov 13, 2022

manniL commented Nov 14, 2022

harlan-zw commented Nov 14, 2022

feat: @vueuse/head v1 #8908

feat: @vueuse/head v1 #8908

Conversation

harlan-zw commented Nov 11, 2022 • edited

🔗 Linked issue

❓ Type of change

📚 Description

Nuxt & @vueuse/head

Next Steps

Migration Guide

Migration Guide

Verify your tags

htmlAttrs and bodyAttrs merge strategy

Duplicate tags in the same entry allowed

📝 Checklist

codesandbox bot commented Nov 11, 2022

netlify bot commented Nov 11, 2022 • edited

✅ Deploy Preview for nuxt3-docs canceled.

harlan-zw Nov 11, 2022 • edited

Choose a reason for hiding this comment

harlan-zw commented Nov 11, 2022

harlan-zw commented Nov 12, 2022

harlan-zw commented Nov 13, 2022

manniL commented Nov 14, 2022

harlan-zw commented Nov 14, 2022

feat: `@vueuse/head` v1 #8908

feat: `@vueuse/head` v1 #8908

harlan-zw commented Nov 11, 2022 •

edited

`htmlAttrs` and `bodyAttrs` merge strategy

netlify bot commented Nov 11, 2022 •

edited

harlan-zw Nov 11, 2022 •

edited