vue-meta 2.0.0

v2.0.0

on Node.js NPM

🎀 We are delighted to officially release Vue-Meta v2.0!

Breaking Change

• The behaviour of keys with undefined as value has changed:
  • In v1 an undefined value would be rendered as a boolean attribute, but as boolean attributes are actually part of e.g. the html5 specifications this functionality has been removed
  • In v2 an undefined value can be used to render child properties conditionally.

See the docs for more information about boolean attribute handling and how to use child properties conditionally

Noteworthy Changes

• We now have a separate documentation website! https://vue-meta.nuxtjs.org
• The global mixin which vue-meta uses now only injects a beforeCreate lifecycle hook. Other lifecycle hooks will only be added when a component has a metaInfo property defined
• When retrieving and merging the metaInfo in your app, component branches without any component which defines metaInfo are skipped
• A refreshOnceOnNavigation option has been added which uses vue-router navigation guards to only trigger meta updates once after navigation. Also check the afterNavigation callback which can be used to run some script that relies on update metadata (e.g. page tracking)
• You have more control on which value is used when a parent and child define the same vmid. See the docs on special cases for more information
• Basic support has been added for using multiple Vue apps or off-document components on a page, currently the following is supported:
  • adding/removing tags (without a vmid) is fully supported
  • there is partial support for using vmid across apps:
    • an app can override a previous set tag with the same vmid from another app
    • if you remove a vmid in app 2 then vue-meta wont automatically load the corresponding vmid from app 1
  • applying attributes are not supported across apps, its recommended to only have one app which adds attributes to a tag
    • you could eg have one app to add html attributes, one to add head and one to add bod but you cant have two apps which both add html attributes as the second app will fully overwrite the attributes of the first app

Migration Guide

1. Update your vue-meta version (tip: use ncu)
2. Run npm install or yarn install
3. Change the boolean attributes you use within your app to have a different value than undefined
4. Profit!

Features

• add afterNavigation callback (97badf6)
• add amp as boolean attribute (b7ee040)
• add browser build without ssr code (2862a5b)
• add esm builds (56f0b61)
• add getOptions method (31e975d)
• add option to refresh once during navigation (8e21175)
• add pause/resume methods to pause updates (d237180)
• attr keys can have array values (01edc8c)
• child can indicate its content should be ignored (22e456c)
• child can indicate parent vmid to be removed (915fedf)
• export hasMetaInfo helper function (173b31d)
• major refactor, cleanup and jest tests (5d64d43)
• render boolean attributes correctly (deea5cf)
• track branches which contain metaInfo components (f2e8eb5)
• use named exports to export helper functions (95c3b7d)
• add basic support for multiple apps on one page (024e7c5)
• ts: update types for v2 (7b85ff2)
• ts: add microdata meta tag type (11c8138)

Bug Fixes

• add afterNavigation type (722786d)
• add inject stub for browser build (02e4094)
• add ts type for refresh once (5935cf3)
• dont call changed with explicit this (5ad6711)
• dont inline typeof definitions (5031acf)
• implement simply array polyfills (d38f81e)
• rollup paths (bfbd181)
• trigger meta refresh on page load (b824a27)
• move addNavGuards check to mounted hook (e80643b)
• use timers instead of requestAnimationFrame (c040de7)

Thanks to

• George Boot (@georgeboot)