I'm trying to add jQuery in my project although i get an error that it is not defined

  plugins: [
    { src: '~/plugins/js/svgSprite.js', mode: 'client' },
    { src: '~/plugins/vendor/jquery/jquery.min.js', mode: 'client' },
    { src: '~/plugins/vendor/bootstrap/js/bootstrap.bundle.min.js', mode: 'client' },
    { src: '~/plugins/vendor/bootstrap-select/js/bootstrap-select.min.js', mode: 'client' }, <-- gives me error
    { src: '~/plugins/vendor/magnific-popup/jquery.magnific-popup.min.js', mode: 'client' },
    { src: '~/plugins/vendor/smooth-scroll/smooth-scroll.polyfills.min.js', mode: 'client' },
    { src: '~/plugins/vendor/object-fit-images/ofi.min.js', mode: 'client' },
    { src: '~/plugins/js/theme.js', mode: 'client' }
  ],

Why is this happening, I'm obviously declaring jQuery before bootstrap-select.

I'm trying to add jQuery in my project although i get an error that it is not defined

  plugins: [
    { src: '~/plugins/js/svgSprite.js', mode: 'client' },
    { src: '~/plugins/vendor/jquery/jquery.min.js', mode: 'client' },
    { src: '~/plugins/vendor/bootstrap/js/bootstrap.bundle.min.js', mode: 'client' },
    { src: '~/plugins/vendor/bootstrap-select/js/bootstrap-select.min.js', mode: 'client' }, <-- gives me error
    { src: '~/plugins/vendor/magnific-popup/jquery.magnific-popup.min.js', mode: 'client' },
    { src: '~/plugins/vendor/smooth-scroll/smooth-scroll.polyfills.min.js', mode: 'client' },
    { src: '~/plugins/vendor/object-fit-images/ofi.min.js', mode: 'client' },
    { src: '~/plugins/js/theme.js', mode: 'client' }
  ],

Why is this happening, I'm obviously declaring jQuery before bootstrap-select.

• javascript
• jquery
• vue.js
• vuejs2
• nuxt.js

• Prefer using NPM, to better handle the versioning of your package. Less error prone too. – kissu Commented Jul 16, 2021 at 19:07

1 Answer 1

I do not remend adding jQuery to a Nuxt project.

But if you really want to, you can follow those steps:

• install it with yarn add jquery
• add those to your nuxt.config.js file

import webpack from 'webpack'

export default {
  // ...
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  },
}

• be sure that you do have the following in your .eslintrc.js file

module.exports = {
  // ...
  env: {
    // ...
    monjs: true,
    jquery: true
  },
}

Then, you can use it like this in a method or alike

$("h2").addClass("tasty-class")