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 $?

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 $?

• javascript
• jquery
• nuxt.js
• undefined-behavior

Share Improve this question Follow edited Feb 16, 2020 at 13:01 letsintegreat 3,36644 gold badges2121 silver badges4141 bronze badges asked Aug 15, 2019 at 10:24 LittleMyglerLittleMygler 6321111 silver badges3131 bronze badges 4

• dont do it. dont use jquery in nuxt. You have vue which covers all of what jquery can do and it will just make project hard to develop and maintain – Aldarund Commented Aug 16, 2019 at 9:04
• What is equalent to my $.each function? – LittleMygler Commented Aug 16, 2019 at 9:05
• vuejs/v2/guide/list.html – Aldarund Commented Aug 16, 2019 at 9:07
• Okey thanks dude! Could you check on my other question about my POST request transforming to a GET :D – LittleMygler Commented Aug 16, 2019 at 9:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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