Easily add script tags to nuxtjs

Question

Basically I need to add the script to the head of my index.html,

<script type="text/javascript" src="https://a.optmnstr.com/app/js/api.min.js" data-account="XXXXX" data-user="XXXXX" async></script>

so what I've tried is...

in my nuxt.config.js

head: {
    script: [
        {  
           type: 'text/javascript', 
           src: 'https://a.optmnstr.com/app/js/api.min.js',
           data-account: 'XXXXX',
           data-user: 'XXXXX',
           async: true
        }
    ]
}

now obviously this isn't working since data-account and data-user is not valid, so how can I make this work??

Any help would be appreciated!

Thanks

You could try and look at this or this.

Andrew1325
– Andrew1325

2019-03-21 09:05:17 +00:00
Commented Mar 21, 2019 at 9:05 — Andrew1325
– Andrew1325, Commented Mar 21, 2019 at 9:05

Smokey Dawson · Accepted Answer · 2019-03-25 00:33:00Z

25

This was pointed out be @Andrew1325

In nuxt.js you can create a app.html file and add scripts to it, so in my case the app.html file looks like this

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
  <script type="text/javascript" src="https://a.optmnstr.com/app/js/api.min.js" data-account="XXXX" data-user="XXXX" async></script>
</html>

IMO this is a very easy way to include difficult scripts into your project

NOTE

You will need to restart your project to see the app.html changes

For more information you can go nuxtjs - app template

answered Mar 25, 2019 at 0:33

Smokey Dawson

9,29023 gold badges87 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ian Samz Over a year ago

How do you add js that is in the assets folder rather than externally

kissu Over a year ago

This solution was validated by @atinux here: github.com/nuxt/nuxt.js/issues/1580#issuecomment-327114193

W.M. Over a year ago

This solution works. One question, how to add the custom HEAD script only for production (target: 'static') ? And avoid loading it while working on development?

Jeff S. · Accepted Answer · 2020-11-10 05:25:57Z

9

You can also just enclose the data attributes in single quotes like this:

head: {
    script: [
        {  
            type: 'text/javascript', 
            src: 'https://a.optmnstr.com/app/js/api.min.js',
            'data-account': 'XXXXX',
            'data-user': 'XXXXX',
            async: true
        }
    ]
}

edited Nov 10, 2020 at 5:25

answered Nov 10, 2020 at 5:16

Jeff S.

1,3111 gold badge15 silver badges18 bronze badges

Comments

skpaik · Accepted Answer · 2020-11-17 07:51:08Z

This could help you

export default {
  data () {
    return {
      message: '',
      head: {
        type: Object,
        default: function () {
          return {
            title: ' Default Home page  ',
            meta: [
              {
                'hid': 'description',
                'name': ' description',
                'content': ' Home page  content '
              }
            ],
            script: [
              {
                innerHTML: {
                  'url': 'https://www.example.com',
                  'logo': 'https://www.example.com/icon/logo.png',
                  'parentOrganization': {
                    'name': 'The X Company Inc',
                    'url': 'https://example.io',
                    'logo': 'https://example.io/logo-est.png',
                    '@type': 'Organization'
                  },
                  'foundingLocation': {
                    'address': {
                      'addressLocality': 'Dakar',
                      'addressRegion': 'Selegal',
                      '@type': 'PostalAddress'
                    },
                    '@type': 'Place'
                  },
                  'sameAs': ['https://www.facebook.com/example', 'https://www.twitter.com/example'],
                  '@context': 'http://schema.org',
                  '@type': 'Organization'
                },
                type: 'application/ld+json'
              }
            ]
          }
        }
      }
    }
  }
}
</script>

Collectives™ on Stack Overflow

Easily add script tags to nuxtjs

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related