<template>
  <div class="layout"
    ...
    <metainfo>
      <template v-slot:title="{ content }">{{ content }} - Yay!</template>
    </metainfo>
  </div>
</template>

<script>
import { useMeta } from 'vue-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

Vue Meta is a Vue.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://vue-meta.nuxtjs.org

Examples

Looking for more examples what vue-meta can do for you? Have a look at the examples

Installation

Yarn

$ yarn add vue-meta@next

npm

$ npm install vue-meta@next --save

Quick Usage

useApi

import { watch } from 'vue'
import { useMeta, useActiveMeta } from 'vue-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 needed

SSR

import { createSSRApp } from 'vue'
import { renderToString } from '@vue/server-renderer'
import { renderToStringWithMeta } from 'vue-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>`
}

Old versions

Click here if you are looking for the old v2 readme

Click here if you are looking for the old v1 readme

License

MIT

README.md Unescape Escape

Manage HTML metadata in Vue.js components with SSR support