@kduse/head
Super-charged document head management for Kdu.
Features
- 💎 Fully typed augmentable Schema
- 🧑🤝🧑 Side-effect based DOM patching, plays nicely your existing other tags and attributes
- 🍣 Intuitive deduping, sorting, title templates, class merging and more
- 🪝 Extensible hook / plugin based API
Installation
npm i @kduse/head
# Or Yarn
yarn add @kduse/headRequires kdu >= v3 or >=2.7
Usage
Kdu 3
Register the Kdu plugin:
import { createApp } from "kdu"
import { createHead } from "@kduse/head"
const app = createApp()
const head = createHead()
app.use(head)
app.mount("#app")Kdu 2
Register the Kdu plugin:
import Kdu from 'kdu'
import { createHead, HeadKduPlugin } from "@kduse/head"
const head = createHead()
// needed for Kdu 2
Kdu.use(HeadKduPlugin, head)
Kdu.use(head)
new Kdu({
render: h => h(App),
}).$mount('#app')SSR Rendering
import { renderToString } from "@kdujs/server-renderer"
import { renderHeadToString } from "@kduse/head"
const appHTML = await renderToString(yourKduApp)
// `head` is created from `createHead()`
const { headTags, htmlAttrs, bodyAttrs, bodyTags } = renderHeadToString(head)
const finalHTML = `
<html${htmlAttrs}>
<head>
${headTags}
</head>
<body${bodyAttrs}>
<div id="app">${appHTML}</div>
${bodyTags}
</body>
</html>`License
MIT License