> Please note that this project is still in very early alpha development and is not considered to be production ready. > You have been warned. There might still be a few bugs and many tests have yet to be written.

Manage page meta info in Vue 2.0 components. SSR + Streaming supported. Inspired by react-helmet.

<template>
  ...
</template>

Table of Contents

• Description
• Disclaimer
• Installation
  • Yarn
  • NPM
  • CDN
• Usage
  • Step 1: Preparing the plugin
    • Options
  • Step 2: Server Rendering (Optional)
    • Step 2.1: Exposing $meta to bundleRenderer
    • Step 2.2: Populating the document meta info with inject()
      • Simple Rendering with renderToString()
      • Streaming Rendering with renderToStream()
  • Step 3: Start defining metaInfo
    • Recognized metaInfo Properties
      • title (String)
      • titleTemplate (String)
      • htmlAttrs (Object)
      • bodyAttrs (Object)
      • base (Object)
      • meta ([Object])
      • link ([Object])
      • style ([Object])
      • script ([Object])
      • noscript ([Object])
      • __dangerouslyDisableSanitizers ([String])
      • changed (Function)
    • How metaInfo is Resolved
      • Lists of Tags
• Performance
  • How to prevent the update on the initial page render
• FAQ
  • How do I use component props and/or component data in metaInfo?
  • How do I populate metaInfo from the result of an asynchronous action?
  • Why doesn't vue-meta support jsnext:main?
• Examples

Description

vue-meta is a Vue 2.0 plugin that allows you to manage your app's meta information, much like react-helmet does 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 meta info directly to deeply nested subcomponents for more maintainable code.

Disclaimer

Please note that this project is still in very early alpha development and is not considered to be production ready. You have been warned. There might still be a few bugs and many tests have yet to be written.

Installation

Yarn

$ yarn add vue-meta

NPM

$ npm install vue-meta --save

CDN

Use the links below - if you want a previous version, check the instructions at https://unpkg.com.

Uncompressed:

Minified:

Usage

Step 1: Preparing the plugin

> This step is optional if you don't need SSR and Vue is available as a global variable. vue-meta will install itself in this case.

In order to use this plugin, you first need to pass it to Vue.use - if you're not rendering on the server-side, your JS entry file will suffice. If you are rendering on the server, then place it in a file that runs both on the server and on the client before your root instance is mounted. If you're using vue-router, then your main router.js file is a good place:

router.js:

import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'

Vue.use(Router)
Vue.use(Meta)

export default new Router({
  ...
})

Options

vue-meta allows a few custom options:

Vue.use(Meta, {
  keyName: 'metaInfo', // the component option name that vue-meta looks for meta info on.
  attribute: 'data-vue-meta', // the attribute name vue-meta adds to the tags it observes
  ssrAttribute: 'data-vue-meta-server-rendered', // the attribute name that lets vue-meta know that meta info has already been server-rendered
  tagIDKeyName: 'vmid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
})

If you don't care about server-side rendering, you can skip straight to step 3. Otherwise, continue. 😄

Step 2: Server Rendering (Optional)

If you have an isomorphic/universal webapp, you'll likely want to render your metadata on the server side as well. Here's how.

Step 2.1: Exposing $meta to bundleRenderer

You'll need to expose the results of the $meta method that vue-meta adds to the Vue instance to the bundle render context before you can begin injecting your meta information. You'll need to do this in your server entry file:

server-entry.js:

import app from './app'

const router = app.$router
const meta = app.$meta() // here

export default (context) => {
  router.push(context.url)
  context.meta = meta // and here
  return app
}

Step 2.2: Populating the document meta info with inject()

All that's left for you to do now before you can begin using metaInfo options in your components is to make sure they work on the server by inject-ing them so you can call text() on each item to render out the necessary info. You have two methods at your disposal:

Simple Rendering with renderToString()

Considerably the easiest method to wrap your head around is if your Vue server markup is rendered out as a string:

server.js:

app.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (error, html) => {
    if (error) return res.send(error.stack)
    const { 
      title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
    } = context.meta.inject()
    return res.send(`
      
      
        
          ${meta.text()}
          ${title.text()}
          ${link.text()}
          ${style.text()}
          ${script.text()}
          ${noscript.text()}
        
        
          ${html}
          
          
        
      
    `)
  })
})

Streaming Rendering with renderToStream()

A little more complex, but well worth it, is to instead stream your response. vue-meta supports streaming with no effort (on it's part 😜) thanks to Vue's clever bundleRenderer context injection:

server.js

app.get('*', (req, res) => {
  const context = { url: req.url }
  const renderStream = renderer.renderToStream(context)
  renderStream.once('data', () => {
    const {
      title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
    } = context.meta.inject()
    res.write(`
      
      
        
          ${meta.text()}
          ${title.text()}
          ${link.text()}
          ${style.text()}
          ${script.text()}
          ${noscript.text()}
        
        
    `)
  })
  renderStream.on('data', (chunk) => {
    res.write(chunk)
  })
  renderStream.on('end', () => {
    res.end(`
          
          
        
      
    `)
  })
  renderStream.on('error', (error) =&gt; res.status(500).end(`<pre>${error.stack}</pre>`))
})

Step 3: Start defining metaInfo

In any of your components, define a metaInfo property:

App.vue:

<template>
  <div id="app">
    
  </div>
</template>

Home.vue

<template>
  <div id="page">
    <h1>Home Page</h1>
  </div>
</template>

About.vue

<template>
  <div id="page">
    <h1>About Page</h1>
  </div>
</template>

Recognized metaInfo Properties

title (String)

Maps to the inner-text value of the <title> element.

{
  metaInfo: {
    title: 'Foo Bar'
  }
}

&lt;title&gt;Foo Bar</title>

titleTemplate (String)

The value of title will be injected into the %s placeholder in titleTemplate before being rendered. The original title will be available on metaInfo.titleChunk.

{
  metaInfo: {
    title: 'Foo Bar',
    titleTemplate: '%s - Baz'
  }
}

<title>Foo Bar - Baz</title>

htmlAttrs (Object)

Each key:value maps to the equivalent attribute:value of the `` element.

{
  metaInfo: {
    htmlAttrs: {
      foo: 'bar',
      amp: undefined
    }
  }
}

bodyAttrs (Object)

Each key:value maps to the equivalent attribute:value of the `` element.

{
  metaInfo: {
    bodyAttrs: {
      bar: 'baz' 
    }
  }
}

Foo Bar

base (Object)

Maps to a newly-created `` element, where object properties map to attributes.

{
  metaInfo: {
    base: { target: '_blank', href: '/' }
  }
}

meta ([Object])

Each item in the array maps to a newly-created `` element, where object properties map to attributes.

{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
}

link ([Object])

Each item in the array maps to a newly-created `` element, where object properties map to attributes.

{
  metaInfo: {
    link: [
      { rel: 'stylesheet', src: '/css/index.css' },
      { rel: 'favicon', src: 'favicon.ico' }
    ]
  }
}

style ([Object])

Each item in the array maps to a newly-created `

#### `script` ([Object])

Each item in the array maps to a newly-created `

noscript ([Object])

Each item in the array maps to a newly-created `