Special metaInfo attributes

These attributes define specific features when used in a metaInfo property

once

When adding a metaInfo property that should be added once without reactivity (thus will never be updated) you can add once: true to the property.

  1. {
  2.   metaInfo: {
  3.     link: [{
  4.       once: true,
  5.       rel: 'stylesheet'
  6.       href: 'style.css'
  7.     }]
  8.   }
  9. }

skip (since v2.1)

When a metaInfo property has a skip attribute with truthy value it will not be rendered. This attribute helps with e.g. chaining scripts (see callback attribute)

  1. {
  2.   metaInfo: {
  3.     script: [{
  4.       skip: true,
  5.       innerHTML: 'console.log("you wont see me")'
  6.     }]
  7.   }
  8. }

body

pbody (since v2.1)

tags

VueMeta supports the body and pbody attributes on all metaInfo properties, but its up to you or your framework to support these attributes during SSR

Using these body attributes without SSR support could result in hydration errors / re-rendering or missing tags.

You can filter tags to be included in the <body> instead of the <head> to e.g. force delayed execution of a script.

Use pbody: true if you wish to prepend the tag to the body (so its rendered just after <body>) or use body: true to append the tag to the body (the tag is rendered just before </body>).

  1. {
  2.   metaInfo: {
  3.     script: [{
  4.       innerHTML: 'console.log("I am in body");',
  5.       type: 'text/javascript',
  6.       body: true
  7.     }]
  8.   }
  9. }

SSR Support

When rendering your template on SSR make sure to pass an object as first argument to the text method of the metaInfo property with either a value body: true or pbody: true

  1. <head>
  2.   <!-- render script tags in HEAD, no argument -->
  3.   ${script.text()}
  4. </head>
  5. <body>
  6.   ${script.text({ pbody: true })}
  8.   <div id="app"></div>
  10.   ${script.text({ body: true })}
  11. </body>

callback (since v2.1)

vmid required on SSR

When using SSR it is required to define a vmid property for the metaInfo property

The vmid is needed to resolve the corresponding callback for that element on hydration

The callback attribute should specificy a function which is called once the corresponding tag has been loaded (i.e. the onload event is triggered). Use this to chain javascript if one depends on the other.

  1. {
  2.   metaInfo() {
  3.     return {
  4.       script: [
  5.         {
  6.           vmid: 'extscript',
  7.           src: '/my-external-script.js',
  8.           callback: () => (this.externalLoaded = true)
  9.         },
  10.         {
  11.           skip: !this.externalLoaded,
  12.           innerHTML: `
  13.             /* this is only added once external script has been loaded */
  14.             /* and e.g. window.$externalVar exists */
  15.           `
  16.         }
  17.       ]
  18.     }
  19.   },
  20.   data() {
  21.     return {
  22.       externalLoaded: false
  23.     }
  24.   }
  25. }