Use jQuery with NuxtJS

nuxt.config.js

const webpack = require('webpack')

module.exports = {
  // other configs
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  },
  // other configs
}

package.json

{
  // other configs.
  "dependencies": {
    // Replace <jquery.version> with the jquery version you want.
    "jquery": "<jquery.version>"
  },
  // other configs.
}

Save jquery.min.js

modify nuxt.config.js

'plugins': [
     { src: '~/plugins/jquery.min.js', ssr: false }
],

This worked for me @luscas. Thank you.

I needed to add a custom jquery file to nuxt.

here's my nuxt.config.js

plugins: [
{ src: '~/plugins/js/main.js', ssr: false }
],

This worked for me @luscas. Thank you.

I needed to add a custom jquery file to nuxt.

here's my nuxt.config.js

plugins: [
{ src: '~/plugins/js/main.js', ssr: false }
],

This solution worked for me like a charm. I had to use the twentytwenty plugin, and so I took the source jquery.min.js file for jquery that was installed in my node_modules folder, and copied it into a folder called ~/plugins/jquery. Then I copied the zurb-twentytwenty node_module files jquery.event.move.js and jquery.twentytwenty.js into the same jquery folder. Then I added the following lines into the plugins section:

`
{ src: '~/plugins/jquery/jquery.min.js', mode: 'client' },

  { src: '~/plugins/jquery/jquery.event.move.js', mode: 'client' },

  { src: '~/plugins/jquery/jquery.twentytwenty.js', mode: 'client' }

`

And it JUST WORKED. No more error messages. I tell you... no other "guide" out in the wild seemed to work at all. I know there's a "vue-twentytwenty" package out there (it didn't work either), however I had use the jQuery version. I haven't fully explored the compatibility and the side effects of using the plugin, but just getting the JS code NOT to error out when jquery is executed is a big win.

In the webpack v4, the vendor option was removed

I 've updated.

Save jquery.min.js

modify nuxt.config.js

'plugins': [
     { src: '~/plugins/jquery.min.js', ssr: false }
],

You should install jquery via npm/yarn. You can update it easier.

there is any way to use jquery within Vuejs components with $, please?

there is any way to use jquery within Vuejs components with $, please?

Try this and see if it helps... https://forum.vuejs.org/t/how-to-use-jquery-in-vue-component/45000/5

in Nuxt3

First you need to install jquery in your project

npm i jquery

Then in the file ~/plugins/jquery.js add the following codes:

import $ from 'jquery'
window.jQuery = window.$ = $
export default jQuery;

And finally add the following code to the nuxt.config.ts

plugins: [
  { src: "~/plugins/jquery", mode: "client" },
 ],

Sample

<script setup>
   onMounted(()=>{
      console.log($('body'));
   })
</script>