Nuxt 添加动态脚本标签

Question

I am using nuxt.js and I have the following script tag

<script type="text/javascript">
        atOptions = {
            'key' : 'id',
            'format' : 'iframe',
            'height' : 60,
            'width' : 468,
            'params' : {}
        };
        document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.highperformancedisplayformat.com/id/invoke.js"></scr' + 'ipt>');
    </script>

When I was using a simple script tag like this on nuxt.config.js it was working

script:[
  { src:'//data.profitablegatetocontent.com/c6/4b/7a/id.js'
  }]

But since the script tag I have to use is a bit complicated I got confused and any help would be appreciated.

Answer 1

vue-meta to the rescue!

The alternative way for adding a dynamic script tag is head() .

For example, in the default layout:

<script>
  export default {
    data() {
      return {
        title: 'Hello World!'
      }
    },
    head() {
      return {
        title: this.title,
        script: [
            {
              hid: '',
              src: '',
              defer: true,
              type: '',
              innerHTML: ,
              callback: () => { } 
            }
        ],
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'My custom description'
          }
        ]
      }
    }
  }
</script>