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.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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