Currently, we are loading jQuery 3.1.4 externally from a CDN on the top page.
index.vue
head: {
bodyAttrs: {
id: 'overview'
},
script: [
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'
}
]
}
In the lower part of the page, version 1.8.3 is included in the CDN due to a jQuery plugin.
**/index.vue
head: {
bodyAttrs: {
id: 'lower'
},
script: [
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js'
}
]
}
We have multiple JS files created with jQuery in the assets directory, which are modularized and imported. There are also other JS files present.
e.g.) ~/assets/useragent.js
/* global $ */
export default function () {
// User agent
var _ua = (function (u) {
return {
Tablet: (u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1) || u.indexOf("ipad") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1) || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1) || u.indexOf("kindle") != -1 || u.indexOf("silk") != -1 || u.indexOf("playbook") != -1,
Mobile: (u.indexOf("windows") != -1 && u.indexOf("phone") != -1) || u.indexOf("iphone") != -1 || u.indexOf("ipod") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1) || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1) || u.indexOf("blackberry") != -1
}
})(window.navigator.userAgent.toLowerCase());
// Is in viewport
$.fn.isInViewport = function (screen) {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = (viewportTop + $(window).height()) * screen;
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('load resize scroll', function () {
$('.shuffle-item--visible').each(function () {
if ($(this).isInViewport(4)) {
$(this).addClass('in_viewport');
} else {
$(this).removeClass('in_viewport');
}
});
});
}
index.vue
mounted: function() {
this.$nextTick(() => {
if (process.browser) {
JqueryEasing()
MagnificPopup()
useragent()
}
})
}
}
Upon review, I found that the following should be added to nuxt.config.js.
nuxt.config.js
build: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery'
})
]
}
When running npm run dev, an error occurred during compilation:
These dependencies were not found:
* $ in ./assets/js/useragent.js
* jQuery in ./plugins/02_jquery.easing.1.3.min.js
To install them, you can run: npm install --save $ jQuery
How can I compile different jQuery versions using a CDN?
After further investigation, I decided to set it as external so that it is not read in the module
build: {
extend(config, ctx) {
config.externals = {
jquery: 'jQuery'
};
}
}
Despite successful compilation, the page shows "Cannot find module 'jQuery' from '/ ~'" and remains inaccessible.