metaInfo properties

Note

The documentation below uses metaInfo as keyName in the examples, please note that this is configurable and could be different in your case

title

  • type stringMaps to the inner-text value of the <title> element.
  1. {
  2.   metaInfo: {
  3.     title: 'Foo Bar'
  4.   }
  5. }
  1. <title>Foo Bar</title>

titleTemplate

  • type string | FunctionThe value of title will be injected into the %s placeholder in titleTemplate before being rendered. The original title will be available on metaInfo.titleChunk.
  1. {
  2.   metaInfo: {
  3.     title: 'Foo Bar',
  4.     titleTemplate: '%s - Baz'
  5.   }
  6. }
  1. <title>Foo Bar - Baz</title>

The property can also be a function:

  1. titleTemplate: (titleChunk) => {
  2.   // If undefined or blank then we don't need the hyphen
  3.   return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
  4. }

htmlAttrs

headAttrs

bodyAttrs

  • type objectEach key:value maps to the equivalent attribute:value of the <body> element.

Since v2.0 value can also be an Array<string>

  1. {
  2.   metaInfo: {
  3.     htmlAttrs: {
  4.       lang: 'en',
  5.       amp: true
  6.     },
  7.     bodyAttrs: {
  8.       class: ['dark-mode', 'mobile']
  9.     }
  10.   }
  11. }
  1. <html lang="en" amp>
  2. <body class="dark-mode mobile">Foo Bar</body>

base

  • type objectMaps to a newly-created <base> element, where object properties map to attributes.
  1. {
  2.   metaInfo: {
  3.     base: { target: '_blank', href: '/' }
  4.   }
  5. }
  1. <base target="_blank" href="/">

meta

  • type collectionEach item in the array maps to a newly-created <meta> element, where object properties map to attributes.
  1. {
  2.   metaInfo: {
  3.     meta: [
  4.       { charset: 'utf-8' },
  5.       { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  6.     ]
  7.   }
  8. }
  1. <meta charset="utf-8">
  2. <meta name="viewport" content="width=device-width, initial-scale=1">

Content templates

Since v1.5.0, you can now set up meta templates that work similar to the titleTemplate:

  1. {
  2.   metaInfo: {
  3.     meta: [
  4.       { charset: 'utf-8' },
  5.       {
  6.         property: 'og:title',
  7.         content: 'Test title',
  8.         // following template options are identical
  9.         // template: '%s - My page',
  10.         template: chunk => `${chunk} - My page`,
  11.         vmid: 'og:title'
  12.       }
  13.     ]
  14.   }
  15. }
  1. <meta charset="utf-8">
  2. <meta name="og:title" property="og:title" content="Test title - My page">
  • type collectionEach item in the array maps to a newly-created <link> element, where object properties map to attributes.
  1. {
  2.   metaInfo: {
  3.     link: [
  4.       { rel: 'stylesheet', href: '/css/index.css' },
  5.       { rel: 'favicon', href: 'favicon.ico' }
  6.     ]
  7.   }
  8. }
  1. <link rel="stylesheet" href="/css/index.css">
  2. <link rel="favicon" href="favicon.ico">

style

  • type objectEach item in the array maps to a newly-created <style> element, where object properties map to attributes.
  1. {
  2.   metaInfo: {
  3.     style: [
  4.       { cssText: '.foo { color: red }', type: 'text/css' }
  5.     ]
  6.   }
  7. }
  1. <style type="text/css">.foo { color: red }</style>

script

  • type collectionEach item in the array maps to a newly-created <script> element, where object properties map to attributes.
  1. {
  2.   metaInfo: {
  3.     script: [
  4.       { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js', async: true, defer: true }
  5.     ],
  6.   }
  7. }
  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" async defer></script>

Add JSON data (since v2.1)

If you wish to use a JSON variable within a script tag (e.g. for JSON-LD), you can directly pass your variable by using the json property.

When passing an array or object to the json property the keys and values of the variable will still be sanitized to prevent XSS

  1. {
  2.   metaInfo: {
  3.     script: [{
  4.       type: 'application/ld+json'
  5.       json: {
  6.         '@context': 'http://schema.org',
  7.         unsafe: '<p>hello</p>'
  8.       }
  9.     }]
  10.   }
  11. }
  1. <script type="application/ld+json">
  2.   { "@context": "http://schema.org", "unsafe": "&lt;p&gt;hello&lt;/p&gt;" }
  3. </script>

Add other raw data

You have to disable sanitizers so the content of innerHTML won't be escaped. Please see __dangerouslyDisableSanitizersByTagID for more info on related risks

  1. {
  2.   metaInfo: {
  3.     script: [{
  4.       vmid: 'ldjson-schema',
  5.       innerHTML: '{ "@context": "http://schema.org" }',
  6.       type: 'application/ld+json'
  7.     }],
  8.     __dangerouslyDisableSanitizersByTagID: {
  9.       'ldjson-schema': ['innerHTML']
  10.     },
  11.   }
  12. }
  1. <script type="application/ld+json">{ "@context": "http://schema.org" }</script>

noscript

  • type collectionEach item in the array maps to a newly-created <noscript> element, where object properties map to attributes.
  1. {
  2.   metaInfo: {
  3.     noscript: [
  4.       { innerHTML: 'This website requires JavaScript.' }
  5.     ]
  6.   }
  7. }
  1. <noscript>This website requires JavaScript.</noscript>

__dangerouslyDisableSanitizers

  • type Array<string>

If you need to disable sanitation, please always use __dangerouslyDisableSanitizersByTagID when possible

By disabling sanitization, you are opening potential vectors for attacks such as SQL injection & Cross-Site Scripting (XSS). Be very careful to not compromise your application.

By default, vue-meta sanitizes HTML entities in every property. You can disable this behaviour on a per-property basis using __dangerouslyDisableSantizers. Just pass it a list of properties you want sanitization to be disabled on:

  1. {
  2.   metaInfo: {
  3.     title: '<I will be sanitized>',
  4.     meta: [{
  5.       vmid: 'description',
  6.       name: 'description',
  7.       content: '& I will not be <sanitized>'
  8.     }],
  9.     __dangerouslyDisableSanitizers: ['meta']
  10.   }
  11. }
  1. <title>&lt;I will be sanitized&gt;</title>
  2. <meta vmid="description" name="description" content="& I will not be <sanitized>">

__dangerouslyDisableSanitizersByTagID

  • type object

By disabling sanitation, you are opening potential vectors for attacks such as SQL injection & Cross-Site Scripting (XSS). Be very careful to not compromise your application.

Provides same functionality as __dangerouslyDisableSanitizers but you can specify which property for which tagIDKeyName sanitation should be disabled. It expects an object with the vmid as key and an array with property keys as value:

  1. {
  2.   metaInfo: {
  3.     title: '<I will be sanitized>',
  4.     meta: [{
  5.       vmid: 'description',
  6.       name: 'still-&-sanitized',
  7.       content: '& I will not be <sanitized>'
  8.     }],
  9.     __dangerouslyDisableSanitizersByTagID: {
  10.       description: ['content']
  11.     }
  12.   }
  13. }
  1. <title>&lt;I will be sanitized&gt;</title>
  2. <meta vmid="description" name="still-&amp;-sanitized" content="& I will not be <sanitized>">

changed

  • type FunctionA callback function which is called whenever the metaInfo updates / changes.

The callback receives the following arguments:

  • newInfo
  • addedTags
    • type Array<HTMLElement>List of elements that were added
  • removedTags
    • type Array<HTMLElement>List of elements that were removed
  1. {
  2.   metaInfo: {
  3.     changed (newInfo, addedTags, removedTags) {
  4.       console.log('Metadata was updated!')
  5.     }
  6.   }
  7. }

afterNavigation

  • type FunctionA callback function which is called when vue-meta has updated the metadata after navigation occurred.This can be used to track page views with the updated document title etc.

Adding a afterNavigation callback behaves the same as when refreshOnceOnNavigation is true

The callback receives the following arguments:

  • newInfo 
  1. {
  2.   metaInfo: {
  3.     afterNavigation(metaInfo) {
  4.       trackPageView(document.title)
  5.       // is the same as
  6.       trackPageView(metaInfo.title)
  7.     }
  8.   }
  9. }