kdu-meta v2.4.1
:warning: This is the readme for the next branch of kdu-meta with Kdu3 support
:information_source: Kdu3 support for kdu-meta is considered in mostly-stable-alpha stage
<template>
<div class="layout"
...
<metainfo>
<template k-slot:title="{ content }">{{ content }} - Yay!</template>
</metainfo>
</div>
</template>
<script>
import { useMeta } from 'kdu-meta'
export default {
setup () {
useMeta({
title: 'My Example App',
htmlAttrs: {
lang: 'en',
amp: true
}
})
}
}
</script><html lang="en" amp>
<head>
<title>My Example App - Yay!</title>
...
</head>Introduction
Kdu Meta is a Kdu.js plugin that allows you to manage your app's metadata. It is inspired by and works similar as react-helmet for react. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the metaInfo property.
These properties, when set on a deeply nested component, will cleverly overwrite their parent components' metaInfo, thereby enabling custom info for each top-level view as well as coupling metadata directly to deeply nested subcomponents for more maintainable code.
Documentation
Please find the documention on https://kdu-meta.web.app
Installation
Yarn
$ yarn add kdu-meta@nextnpm
$ npm install kdu-meta@next --saveQuick Usage
Setup
// main.ts
import { createApp as createKduApp } from 'kdu'
import { createMemoryHistory } from 'kdu-router'
import { createMetaManager, plugin as metaPlugin } from 'kdu-meta'
import App from './App'
export const createApp = (base: string) => {
const app = createKduApp(App)
const router = createMemoryHistory(base)
const metaManager = createMetaManager()
app.use(router)
app.use(metaManager)
app.use(metaPlugin) // optional, only needed for OptionsAPI (see below)
return {
app,
router,
metaManager
}
}
// browser.ts
import { createApp } from './main'
const { app, router } = createApp('/')
router.isReady().then(() => app.mount('#app'))useApi
import { watch } from 'kdu'
import { useMeta, useActiveMeta } from 'kdu-meta'
export default {
setup () {
const counter = ref(0)
// Add meta info
// The object passed into useMeta is user configurable
const { meta } = useMeta({
title: 'My Title',
})
watchEffect(() => {
const counterValue = counter.value
meta.description = `Counted ${counterValue} times`
})
// Or use a computed prop
const computedMeta = computed(() => ({
title: 'My Title',
description : `Counted ${counter.value} times`
}))
const { meta, onRemoved } = useMeta(computedMeta)
onRemoved(() => {
// Do something as soon as this metadata is removed,
// eg because the component instance was destroyed
})
// Get the currently used metainfo
const metadata = useActiveMeta()
watch(metadata, (newValue) => {
// metadata was updated, do something
})
}
}The useApi can also be used outside of a setup function, but then you need to get a reference to the metaManager somehow
const { unmount } = useMeta(
{
og: {
something: 'test'
}
},
metaManager
)
unmount() // Remove metadata when neededSSR
Note that kdu-meta/ssr is a ESM module so you might need to tell Webpack/Babel to transform it
import { createSSRApp } from 'kdu'
import { renderToString } from '@kdujs/server-renderer'
import { renderToStringWithMeta } from 'kdu-meta/ssr'
import { App, metaManager } from './App'
export function renderPage() {
const app = createSSRApp(App)
app.use(metaManager)
const ctx = {}
const appHtml = await renderToString(app, ctx)
await renderMetaToString(app, ctx)
return `
<html ${ctx.teleports.htmlAttrs || ''}>
<head ${ctx.teleports.headAttrs || ''}>
${ctx.teleports.head || ''}
</head>
<body ${ctx.teleports.bodyAttrs || ''}>
<div id="app">${appHtml}</div>
${ctx.teleports.body || ''}
</body>
</html>`
}Use Options API
The plugin only adds support for the metaInfo component prop. You still need to create a meta manager.
Compared to v2, the properties changed, afterNavigation & the __dangerouslyX props are not support.
// Install the plugin first
import { plugin as kduMetaPlugin } from 'kdu-meta'
app.use(kduMetaPlugin)
// then in your Component.kdu
export default {
metaInfo() {
return {
title: 'My Options API title',
}
}
}