'Nuxt - add script to head and body

I am trying to use this script in my Nuxt app, but can't figure out how. In a basic HTML file, it works fine. This is the code:

<!DOCTYPE html>
<html>
  <head>
    <title>outdooractive platform - API Template</title>
    <meta charset="utf-8">

    
    <!-- load Outdooractive Javascript API -->
    <script type="text/javascript" 
            src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>


  </head>
  <body>

    <!-- container used by FlexView API -->
    <div class="oax-top-cont"></div>


    <!-- and some lines of javascript inside a script tag -->
    <script type="text/javascript">

      var conf = {
          frontendtype:   "tour",          // choose content type
          zoom:           11,              // set initial zoom level
          center:       [ 10.292, 47.546 ] // set initial map center
      };
      
      var fvp = oa.api.flexviewpage( conf );

    </script>
  </body>
</html>

I have tried this approach, but it returns with an error that api doesn't exist

data() {
    return {
      conf: {
        frontendtype: 'tour',
        zoom: 11,
        center: [10.292, 47.546]
      }
    }
  },
  head() {
    return {
      script: [
        {
          src: '//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en'
        },
        {
          body: true,
          fvp: this.oa.api.flexviewpage(this.conf) // attempt one
          fvp: () => {this.oa.api.flexviewpage(this.conf)} // attempt two
        }
      ]
    }
  }

I am still fairly new so would really appreciate some help, and perhaps a description of why the var fvp is recognized in a plain HTML file, but not with Nuxt.

Thank you

nuxt.js

Solution 1:^[1]

the simplest way:

custom your index.html

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <!-- load Outdooractive Javascript API -->
    <script type="text/javascript" src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>

  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}

    <!-- container used by FlexView API -->
    <div class="oax-top-cont"></div>


    <!-- and some lines of javascript inside a script tag -->
    <script type="text/javascript">

      var conf = {
          frontendtype:   "tour",          // choose content type
          zoom:           11,              // set initial zoom level
          center:       [ 10.292, 47.546 ] // set initial map center
      };
      
      var fvp = oa.api.flexviewpage( conf );

    </script>
  </body>
</html>

if the conf value is dynamic, you can add it in your head()

data() {
  return {
    conf: {
      frontendtype: 'tour',
      zoom: 11,
      center: [10.292, 47.546]
    }
  }
},
head(){
  return {
    script: [
      {
        src: '//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en'
      },
      {
        type:'text/javascript',
        innerHTML: JSON.stringify(this.conf)
      }
    ]
  }
}

Solution 2:^[2]

In Nuxt 3 you simply use the Script component, eg:

<Script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXXX-X"></Script>

<Script>
   // some JS code
</Script>

Note that most things that typically go in the head portion of the document now have components. There is also the useHead composable. See https://v3.nuxtjs.org/guide/features/head-management/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	DengSihan
Solution 2	Jason Simpson

'Nuxt - add script to head and body

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]