Vue Meta

# Server Side Rendering

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

# Add vue-meta to the context

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 metadata. 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
}

# Inject metadata into page string

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

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, headAttrs, bodyAttrs, link,
      style, script, noscript, meta
    } = context.meta.inject()
    return res.send(`
      <!doctype html>
      <html ${htmlAttrs.text(true)}>
        <head ${headAttrs.text()}>
          ${meta.text()}
          ${title.text()}
          ${link.text()}
          ${style.text()}
          ${script.text()}
          ${noscript.text()}
        </head>
        <body ${bodyAttrs.text()}>
          <!-- prepended metaInfo properties -->
          ${style.text({ pbody: true })}
          ${script.text({ pbody: true })}
          ${noscript.text({ pbody: true })}

          <!-- app -->
          ${html}

          <!-- webpack assets -->
          <script src="/assets/vendor.bundle.js"></script>
          <script src="/assets/client.bundle.js"></script>

          <!-- appended metaInfo properties -->
          ${style.text({ body: true })}
          ${script.text({ body: true })}
          ${noscript.text({ body: true })}
        </body>
      </html>
    `)
  })
})

If you are using a separate template file, edit your head tag with

<head>
  {{{ meta.inject().title.text() }}}
  {{{ meta.inject().meta.text() }}}
</head>

Notice the use of {{{ to avoid double escaping. Be extremely cautious when you use {{{ with __dangerouslyDisableSanitizersByTagID.

# Inject metadata into page stream

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, headAttrs, bodyAttrs, link,
      style, script, noscript, meta
    } = context.meta.inject()
    res.write(`
      <!doctype html>
      <html data-vue-meta-server-rendered ${htmlAttrs.text()}>
        <head ${headAttrs.text()}>
          ${meta.text()}
          ${title.text()}
          ${link.text()}
          ${style.text()}
          ${script.text()}
          ${noscript.text()}
        </head>
        <body ${bodyAttrs.text()}>
    `)
  })
  renderStream.on('data', (chunk) => {
    res.write(chunk)
  })
  renderStream.on('end', () => {
    res.end(`
          <script src="/assets/vendor.bundle.js"></script>
          <script src="/assets/client.bundle.js"></script>
          ${script.text({ body: true })}
        </body>
      </html>
    `)
  })
  renderStream.on('error', (error) => {
    res.status(500).end(`<pre>${error.stack}</pre>`)
  })
})

← Frameworks →