Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Easily add script tags to nuxtjs

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

like image 538
Smokey Dawson Avatar asked Mar 21 '19 01:03

Smokey Dawson


People also ask

How do you add script tags?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

Where is the best place to put script tags?

The script tag should always be used before the body close or at the bottom in HTML file. The Page will load with HTML and CSS and later JavaScript will load.

How can I write multiple script tags in HTML?

Multiple <SCRIPT> Tags Up to this point all of the JavaScript Code was in one <SCRIPT> tag, this does not need to be the case. You can have as many <SCRIPT></SCRIPT> tags as you would like in a document. The <SCRIPT> tags are processed as they are encountered.


1 Answers

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

like image 97
Smokey Dawson Avatar answered Nov 05 '22 10:11

Smokey Dawson