Manage HTML metadata in Vue.js components with SSR support
Example of adding additional meta info for eg a third party plugin:
const { set, remove } = app.$meta().addApp('custom')
set({
meta: [{ charset: 'utf=8' }]
})
setTimeout(() => remove(), 3000)
There is no reactivity for custom apps. You need to take care of that and call set and remove when apropiate. If you call addApp.set on the client before the app is mounted, the tags will be processed on the first refresh. If you call set when the app is mounted they tags are immediately processed.
The function is called addApp because the added metaInfo is treated exactly the same as when there are multiple apps on one page. Eg the tags that will be added will also list the appId you specifiy:
<meta data-vue-meta="custom" charset="utf-8">
So templates can be a little less verbose:
Old: https://github.com/nuxt/vue-meta/blob/fc71e1f1c4ca27e2eaf99e288c005976d492c004/examples/ssr/app.template.html New: https://github.com/nuxt/vue-meta/blob/master/examples/ssr/app.template.html
Pass either a boolean true to inject().head(true), inject().bodyPrepend(true) or inject().bodyAppend(true) to insert a linebreak after all tags.
If you want to keep using the old syntax, pass a prop ln: true as arg: meta.script.text({ body: true, ln: true })
The behaviour that vue-meta always adds data- attributes to track attributes on the client side has been changed. Instead of a data attribute we keep a local attributeMap object in the attribute updater which also adds support for updating attributes from multiple apps. To track this data from a ssr page, the data- tag is still added but with a JSON encoded map.
For example
// data
metaInfo = {
bodyAttr: { foo: 'bar', fizz: ['fuzz', 'fozz'] }
}
// ssr tag
<body foo="bar" fizz="fuzz fozz" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D,%22fizz%22:%7B%22ssr%22:%5B%22fuzz%22,%22fozz%22%5D%7D%7D">
// tag after hydration
<body foo="bar" fizz="fuzz fozz">
// attribute map (values listed per app id)
{ bodyAttrs: {
foo: { ssr: 'bar' },
fizz: { ssr: ['fuzz', 'fozz'] }
}}
Some plugin options can be changed during runtime by calling app.$meta().setOptions(). Besides the two new options below you can also use enable refreshOnceOnNavigation this way (its not possible to disable refreshOnceOnNavigation)
debounceWaitYou can now configure for how long vue-meta debounces meta updates. The default value is 10ms.
This option can be set during runtime:
// debounce meta updates for 50ms
app.$meta().setOptions({ debounceWait: 50 })
waitOnDestroyedOnce a component is destroyed, vue-meta will update the meta information to make sure any info added by the destroyed component is removed. Default value is true
Previously this always set an interval of 50ms to make sure to wait until the element had been removed (due to transitions). If you set waitOnDestroyed: false then the destroyed update will always be called in the nextTick instead.
Note that destroyed updates are also debounced with other lifecycle hook updates
This option can be set during runtime:
app.$meta().setOptions({ waitOnDestroyed: false })
This release provides a workaround for a memory leak that was present in vue-meta. We recommend everybody to upgrade as soon as possible.
The v2.1 release adds new features which where originally mostly postponed for v3, but have been brought forward due to various reasons.
As the docs have been updated to reflect the new features, we will link to the docs if you wish more detials: