在 nuxt.js 视图中使用 jquery

Question

I'm trying out nuxt.js for the first time. But I can't get JQuery to work.

I've installed the npm package alongside with bootstrap.js and popper.js .

Also added this to the nuxt.config.js :

vendor: ['jquery', 'bootstrap'],
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery'
      })
    ],

But when I try to use it in the view it doesn't work. First I get:

"$" is not defined

Then when I try to require it by require $ from 'jquery' I get undefined when I try to use $ .

I'm programming .Net usually so this is not my strongest part.

I'm trying to use $ like so:

$.each(this.imageList, function(key, image) {
    formData.append(`images[${key}]`, image)
  })

As said it gives me different undefined errors depending if I require it or not.

How can I make it recognize the $ ?

Answer 1

I think jquery can be used everywhere in the project. so global declaration will be best case. you can simply add JQuery in your project ,

1. keep your JQuery.js into static folder
2. just add piece of code into Nuxt.config.js file like below:

script: [{src: 'jquery-3.3.1.min.js'}]

hope your problem will solve.

see the image:

you can download JQuery from here