Skip to content

v2.3.0
Compare
Choose a tag to compare
@pimlie pimlie released this 08 Oct 09:33
· 69 commits to master since this release
v2.3.0
f659121

Highlights

Adding additional meta info

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">

New SSR injector helpers

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

Add line break (SSR only)

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 })

Support setting attributes from multiple apps

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'] }
}}

Change plugin options during runtime

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)

New option debounceWait

You 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 })

New option waitOnDestroyed

Once 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 })

Changelog

Features

  • feat: add options debounceWait (d43b77c)
  • feat: add option waitOnDestroyed (f745059)
  • feat: add possibility to add additional meta info (0ab76ee)
  • feat: add support for setting attributes from multiple apps (d9b0ab2)
  • feat: enable setting refreshOnceOnNavigation during runtime (9d14387)

Fixes

  • fix: use computed prop (which uses caching) instead of calling the fn directly (c344d60)

Refactors

  • refactor: destroyed never runs on server anyway (631cc9c)
  • refactor: minimize function calls / use of bind (0e49a9c)
  • refactor: prefer functions over closures for hooks (54ea6c6)
  • refactor: small bundle size improvements (9eba2b5)

Documentation

  • docs: add Factor to frameworks (#459) (Andrew Powers) (da0ba13)
  • docs: Use direct link to Nuxt documentation (#446) (novellac) (20ac995)

Chore

  • chore: add missing (c1b01b9)
  • chore: dist size improvements (ee12bfc)
  • chore: fix lint (b73b8ed)
  • chore: lint & fix test (ae98f65)
  • chore: prevent enhancements to go stale (f1ed379)
  • chore: strip bundles deepmerge even more (398d1af)
  • chore: stripped deepmerge a bit too much (695159f)
  • chore: update dependencies (47a1dde)

Tests

  • test: add tests for new functionalities (a2f0e7d)
  • test: build ssr fixture in test so we can collect coverage (dcdd47a)

Miscellaneous

  • example: cleartimeout in ssr example (9225d5e)
  • example: update dependencies (1854018)
Assets 2