Vue useHead composable instead of <Head> component ?
#1810
Replies: 4 comments
-
|
Hi @mrleblanc101 |
Beta Was this translation helpful? Give feedback.
-
|
@SergkeiM How do you do this? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Borderliner, InertiaJS is under MIT license, so I took the source code and did the changes: inside import { createHead } from '@unhead/vue'
import { renderSSRHead } from '@unhead/ssr'
....
createInertiaApp({...}
....
const head = createHead()
const vueApp = await resolveComponent(initialPage.component).then((initialComponent) => {
return setup({
el,
App,
head, // return created head
props: {
initialPage,
initialComponent,
resolveComponent
}
})
})
...
// If inside ssr:
const payload = await renderSSRHead(head)
return {
head: payload.headTags,
bodyTags: payload.bodyTags,
bodyTagsOpen: payload.bodyTagsOpen,
htmlAttrs: payload.htmlAttrs,
bodyAttrs: payload.bodyAttrs,
body
}
//Inside your setup
setup: ({ el, App, props, head }) => createSSRApp({
render: () => h(App, props)
})
.use(head).mount(el); |
Beta Was this translation helpful? Give feedback.
-
|
@SergkeiM Would appreciate seeing your fork or a diff. |
Beta Was this translation helpful? Give feedback.
-
Wouldn't that be more clean ?
I hate to place a
Headin my components that is rendered elsewhere in the DOM.I don't feel like it's intuitive or a good practive.
I think a
useHeadcomposable like Nuxt would be cleaner. https://nuxt.com/docs/api/composables/use-headNuxt
useHeadis powered byunheadwhich is framework agnostic so it could be implemented in Inertia: https://unhead.unjs.io/Beta Was this translation helpful? Give feedback.
All reactions