Add jQuery to Vue CLI 3

Here’s how you can add jQuery to a Vue CLI 3 project.

1. Install jQuery

Use npm to install jQuery into the project:

npm install jquery

2. Add jQuery to Global Scope

Update or create vue.config.js in the root directory of the project. Add webpack.ProvidePlugin to inject jQuery globally so it’s accessible throughout the project without needing to import it each time.

// vue.config.js
const webpack = require('webpack');

module.exports = {
 configureWebpack: {
   plugins: [
     new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery'
     })
   ]
 }
};

3. Use jQuery in Vue Components

You can now directly use jQuery selectors and methods inside the methods or lifecycle hooks of Vue components.
For example:

<!-- ExampleComponent.vue -->
<template>
 <div>
   <button @click="highlightText">Click Me</button>
   <p class="text">Hello from jQuery</p>
 </div>
</template>
<script>
export default {
 methods: {
   highlightText() {
     $('.text').css('color', 'red');
   }
 }
};
</script>

Notes

• Ensure you restart the development server after editing vue.config.js.
• This setup is ideal for adding legacy jQuery functionality or plugins inside a Vue 2 (CLI 3) project.

Also Read:

Vue js Authentication and Authorization