Menu
I am basing a website on an old tutorial, which uses 3 external js files. I am not able to recreate this using nuxtjs.
First, I tried to include the js files before the tag.
nuxt.config.js
head: {
script: [
{ src: 'js/imagesloaded.pkgd.min.js', type: 'text/javascript', body: true, defer: true },
{ src: 'js/TweenMax.min.js', type: 'text/javascript', body: true, defer: true },
{ src: 'js/demo.js', type: 'text/javascript', body: true, defer: true }
]
},
This works on initial page load. However, as soon as I change the page, the js files are ignored.
nuxt.config.js
plugins: [
{ src: "plugins/imagesloaded.pkgd.min.js", mode: 'client' },
{ src: "plugins/TweenMax.min.js", mode: 'client' },
{ src: "plugins/demo.js", mode: 'client' }
],
This gave me multiple error messages (amongst other things: 'Cannot read property addEventListener of null).
This is a very small project with a lot of time pressure, so any kind of help would be highly appreciated!
Update:
Original GitHub repository.
594
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 JavaScript file will be saved with a . The file can be saved anywhere in the Web Project directory. It is common practice to put JavaScript files in a folder named "javascript" or "src" when building web and mobile applications.
External JavaScript is when the JavaScript Code(script) is written in another file having an extension . js and then we link this file inside the <head> or<body> tag of our HTML file in which the code is to be added.
Solution - steps to follow:
Add base.css to static > css folder, and also add all of the js files to static > js folder and then reference everything in nuxt.config.js:
link: [
{ rel: 'stylesheet', type: 'text/css', href: 'css/base.css' }
],
script: [
{ src: 'js/imagesloaded.pkgd.min.js', type: 'text/javascript', body: true, defer: true },
{ src: 'js/TweenMax.min.js', type: 'text/javascript', body: true, defer: true },
{ src: 'js/demo.js', type: 'text/javascript', body: true, defer: true }
]
Add all of the images to static > img folder and edit the base.css in order to reference images in base.css - write (wherever the images are referenced (2 places)): url('../img/1.jpg')
In the Vue template, copy-paste the HTML as-is.
When it comes to referencing images in the Vue template you would simply do:
<div class="background" style="background-image: url(img/1.jpg)"></div>
That is it. It should work just fine.
I created a GitHub repository so you can have a look and see how I have done it.
You can also view it live on CodeSandbox.
177
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
