How To Use A Vue Variable In Metainfo?

What is the correct syntax for this line Vue inside the script: export default { metaInfo: { title: '{product.name} wallpaper', The line came to the form: title: 'Space wall

Solution 1:

Template literals use backticks and a dollar sign before the braces, e.g.:

title: `${product.name} wallpaper`

To use reactive variables in the metaInfo as part of a function, the Vue Meta docs says that you can make metaInfo a function and assign the reactive variable to a local variable before returning the data. For example:

metaInfo() {
      const product = this.product;
      return {
          title: `${product.name} wallpaper`
      }
}

One of the contributors to Vue Meta explained why you need to do it this way here.