Skip to content

Releases: nuxt/vue-meta

v3.0.0-alpha.8

06 Jun 15:56
Compare
Choose a tag to compare
v3.0.0-alpha.8 Pre-release
Pre-release

Features

  • add plugin for options api support (0745f16)

v3.0.0-alpha.3

04 Apr 23:07
Compare
Choose a tag to compare
v3.0.0-alpha.3 Pre-release
Pre-release

Features

  • add fully static / client-only example (c6c3b47)
  • make createMetaManager util args optional (use defaults) (89d7f58)

Bug Fixes

  • dont call clean before starting dev server (683ea9c)
  • fix/improve resolver types (fcb47a9)
  • only match vue-meta in jiti alias (2b8c5e8)
  • replace node-env in rollup config (ed6ba9f)
  • use dynamic import for vue server-renderer (8e2fed1)

v3.0.0-alpha.2

28 Feb 22:41
Compare
Choose a tag to compare
v3.0.0-alpha.2 Pre-release
Pre-release

Changes

  • add support for computed metadata
  • add onRemoved guard
  • wait for component element to be removed from the DOM before removing metadata to prevent flash during page transitions

uses a MutationObserver, might need a polyfill but afaik any browser supporting Proxy also supports MutationObserver

  • some code cleanup
  • show active metadata in vue-router example
  • improved styling a bit of vue-router example

v3.0.0-alpha.1

31 Jan 23:41
Compare
Choose a tag to compare
v3.0.0-alpha.1 Pre-release
Pre-release

Changes

  • Renamed useMetainfo to useActiveMeta
  • Export types

v3.0.0-alpha.0

25 Jan 00:50
Compare
Choose a tag to compare
v3.0.0-alpha.0 Pre-release
Pre-release

The first alpha release for vue-meta v3 supporting Vue 3, basic functionality should work but needs lots more testing. Don't use this in production. Help with squashing bugs would be appreciated.

Quick overview of features

useApi

See ./examples/vue-router for a working example

import { watch } from 'vue'
import { useMeta, useMetainfo } from 'vue-meta'

export default {
  setup () {
    // add meta info. The object passed into useMeta is configurable
    const { meta } = useMeta({
      title: 'My Title'
    })

    // get the currently used metainfo
    const metadata = useMetainfo()

    watch(metadata, (newValue) => {
      // metadata was updated, do something
    })
  }
}

SSR

See ./examples/ssr for a working example

import { createSSRApp } from 'vue'
import { renderToStringWithMeta } from 'vue-meta'
import { App, metaManager } from './App'

export function renderPage() {
  const app = createSSRApp(App)
  app.use(metaManager)

  const [appHtml, ctx] = await renderToStringWithMeta(app)

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

Meta Resolvers

needs more attention + real world testing

In vue-meta v2 there was limited control on which metadata to show if you had multiple components returning the same information.

In v3 we introduce meta resolvers, these are functions that should give you full control on which data to show when multiple options exist.

See eg ./src/resolvers/deepest and ./examples/vue-router/main. The deepest resolver uses the data of the component with the highest depth (from the $root component). The resolver in the vue-router example just returns the data of the newest component (highest _uid).

Metainfo Component

Adding this component is currently required, but it will eventually be optional

Add a Metainfo component in your app to extend the used metadata using slots.

  <div class="my-layout">
    <metainfo>
      <!-- // content contains the value active value for base from `useMetainfo` -->
      <template v-slot:base="{ content, metainfo }">http://nuxt.dev:3000{{ content }}</template>
      <template v-slot:title="{ content, metainfo }">
        {{ content }} - {{ metainfo.description }} - Add the description to the title
      </template>
    </metainfo>
  </div>

Known Issues

  • Metainfo component has to be present otherwise client side updates wont work
  • The error Uncaught ReferenceError: body is not defined is logged in the browser
    Solution: Add a body slot to your metainfo component with an empty tag: <metainfo><template v-slot:body><span/></template></metainfo>
  • Types are wrong (still pointing to v2 types)

v2.4.0

10 Jun 14:09
Compare
Choose a tag to compare

Features

  • add support for global inject options (#568) (8b02eb2)

Types

  • types: augment MetaInfo with missing titleChunk (#559)

Thanks to

v2.3.4

26 May 21:05
Compare
Choose a tag to compare

Features

  • add amp-boilerplate as boolean attribute (resolves: #530) (#531) (bb45319)

Bug Fixes

  • also set ssrAppId for first Vue app when ssrAttribute exists (#563) (4664df2)
  • auto install plugin in browser (32fdb20)
  • improve ssr detection when 1st metaInfo component isnt root (a41b9a7)
  • support falsy values in eg body attributes (fix: #535) (1ef4108)

v2.3.3

26 Feb 23:09
Compare
Choose a tag to compare

Bug Fixes

  • memory leak, use hook events (thanks #522) (21621e1)
  • support once (with skip) client side (fix #498) (c74c645)

Thanks to

v2.3.2

12 Jan 15:13
Compare
Choose a tag to compare

Fixes

  • fix: call afterNavigation after nextTick (#478) (Ricardo Gobbo de Souza) (fa12530)

Documentation

  • docs: add missing comma in API docs (#483) (John Franey) (5e581ae)
  • docs: adds documentation for json option (#482) (Marcel Pfeifer) (0145166)
  • docs: fix properties typo (#489) (Nikita) (12645a9)
  • docs: fix typo (#473) (Denis) (c6b20eb)

v2.3.1

09 Oct 10:12
Compare
Choose a tag to compare

Bug Fixes

  • accept and pass options as second arg for generate (2ce5177)
  • still traverse children when metainfo doesnt return object (#469) (35b7099)
  • try to detect global mixins adding meta info (#467) (2231ec1)