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
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With