Nuxtjs introduces jq's third-party library and reports error jquery.bgswitcher.js:559 Uncaught ReferenceError: jQuery is not defined solution (solved)

 

 

 demo please click here    https://download.lllomh.com/cliect/#/product/LC13263245955860

There is a lot of information on the Internet, but none of it is related to nuxt importing the jq plug-in. Some of them just tell you how to import jq. Here is the way to write the plug-in that depends on jq:

Here I will use the jQuery.headroom.js plug-in as an example.

1. First, change the way the plug-in is written: /plugins/bgswitcher.js

export function chatBg($,jQuery){

... code

}

2. Import where you need to use: pages/home.vue:

import {chatBg} from '../../plugins/bgswitcher'

3. Pass it in when calling:

  mounted() {
    chatBg($,jQuery)
    jQuery(function($) {
      $('.bg-slider').bgSwitcher({
        images: ['img/main01.jpg','img/main02.jpg','img/main03.jpg','img/main04.jpg','img/main05.jpg'],
      });
    });
  },

This way it can be used.