Conversation
|
|
WalkthroughThe Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/4.api/2.composables/use-head.md (1)
91-93: Update the Return Values section—current documentation contradicts the function signature.Line 93 states "This composable does not return any value", but the signature on line 41 clearly returns
ActiveHeadEntry<UseHeadInput>. This is outdated and misleading, especially since the newdispose()method directly addresses the linked issue (#33834) about removing link tags on CSR navigation.Apply this diff to document the return value and new methods:
## Return Values -This composable does not return any value. It registers the head metadata with Unhead, which manages the actual DOM updates. +The composable returns an `ActiveHeadEntry<MetaObject>` object with the following methods: + +- **`patch(input: MetaObject): void`** — Updates the entry with new input. Clears any side effects for previous input before applying new changes. +- **`dispose(): void`** — Removes the entry from the active head and queues side effects for removal. Useful for cleaning up tags when navigating away or when they should no longer appear.Then add an example demonstrating
dispose()to address the linked issue:### Body and HTML Attributes ```vue [app/pages/themed.vue] <script setup lang="ts"> const isDark = ref(true) useHead({ htmlAttrs: { lang: 'en', class: computed(() => isDark.value ? 'dark' : 'light'), }, bodyAttrs: { class: 'themed-page', }, }) </script>+### Managing and Removing Entries
+
+```vue [app/pages/canonical.vue]
+<script setup lang="ts">
+// Capture the return value to manage the entry
+const headEntry = useHead(() => ({
- link: [
- {
rel: 'canonical',href: route.fullPath,- },
- {
rel: 'alternate',hreflang: 'fr',href: route.fullPath.replace('/en/', '/fr/'),- },
- ],
+}))+// When navigating or when tags should be removed:
+const removeCanonical = () => {
- headEntry.dispose() // Removes all associated link tags
+}+// Or update the entry while clearing previous side effects:
+const updateCanonical = (newHref: string) => {
- headEntry.patch({
- link: [
{rel: 'canonical',href: newHref,},- ],
- })
+}
+</script>
+```
🧹 Nitpick comments (1)
docs/4.api/2.composables/use-head.md (1)
40-70: Clarify theUseHeadInputtype reference.Line 41 uses a generic type
UseHeadInputthat is not defined in the documentation. Is this an alias forMetaObject, or a distinct type? This should be made explicit for users consuming the return value.Consider adding a type alias definition or clarifying the relationship:
type UseHeadInput = MetaObjector update the signature to directly reference
MetaObject:-export function useHead (meta: MaybeComputedRef<MetaObject>): ActiveHeadEntry<UseHeadInput> +export function useHead (meta: MaybeComputedRef<MetaObject>): ActiveHeadEntry<MetaObject>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/4.api/2.composables/use-head.md(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: link-checker
🔇 Additional comments (2)
docs/4.api/2.composables/use-head.md (2)
74-89: Parameters section is comprehensive and accurate.The parameter table correctly documents all properties of the
MetaObjectinterface and provides clear descriptions for each. No changes needed.
95-182: Examples section demonstrates common use cases effectively.All four examples correctly illustrate typical
useHead()usage patterns. However, they do not demonstrate the new return value API. Once the Return Values section is updated with usage examples fordispose()andpatch(), the documentation will be complete.
🔗 Linked issue
fix #33834 (comment)
📚 Description