how to insert <script> tag before </body>？

[fanpenghuix]

i want to insert some <script> tag before the </ body> tag in some pages. if i modify app.html ,all pages will be inserted,or i use head() in these pages,it will be inserted in the head,these are not my wanted

_{This feature request is available on Nuxt.js community (#c1775)}

[sokills]

can edit in the template html

[fanpenghuix]

can edit in the template html

app.html?all pages will be inserted

[clarkdo]

All <script> tags have been inserted before </body>, soure is in renderer.js#L530

[fanpenghuix]

@clarkdo

emmm..i want to import 3rd party lib ,use script tag to import instead import .
like this <script src= "//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
it will be used in some pages not all pages ,so i dont want to modify app.html.

[paulgv]

I guess you could include those scripts in the pages themselves.

[fanpenghuix]

I guess you could include those scripts in the pages themselves.

i include theses scripts in the < template > now,but i got the missmatch warnning.

i guess the 3rd party lib will change the dom so i got this warnning and the <script> is not in the place where i want .

Is there any other way?

[clarkdo]

<template>
<div></div>
</template>

<script>
export default {
  created() {
    if (process.browser) {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.body.appendChild(recaptchaScript)
    }
  }
}
</script>

[fanpenghuix]

@clarkdo I had tried this way ,but there are some reasons cant use this way.
this page be put in a native ios app.ios webview will call some js method on finishedload page,but the js has not be loaded yet.

[clarkdo]

How about this ?

<div v-html="scripts"></div>

export default {
  data: () => ({
    scripts: "<script src='https://www.google.com/recaptcha/api.js'><\/script>"
  })
}

[pimlie]

I guess you want to add scripts to the bottom to defer execution because the script is used on the page but not required for viewing the page?

Actually I have asked for the same functionality in #1370, it would be nice it you could do this easily with nuxt. Although you can set the defer tag with vue-meta, which should defer execution, I still also prefer to put them psychically at the bottom of the page.

[cretueusebiu]

Nuxt will generate a app.template.html file inside .nuxt/views. You can edit it and add your script there.

[fanpenghuix]

<div v-html="scripts"></div>

export default {
  data: () => ({
    scripts: "<script src='https://www.google.com/recaptcha/api.js'><\/script>"
  })
}

works ,same as

  <div>
    <video id="azuremediaplayer" ></video>
    <script src="azure/azuremediaplayer.min.js"></script>
  </div>

not in front of the </ body> tag