{"id":13446,"date":"2025-09-11T07:11:20","date_gmt":"2025-09-11T07:11:20","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13446"},"modified":"2025-09-11T07:11:20","modified_gmt":"2025-09-11T07:11:20","slug":"add-jquery-to-vue-cli-3","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/add-jquery-to-vue-cli-3","title":{"rendered":"Add jQuery to Vue CLI 3"},"content":{"rendered":"

Here\u2019s how you can add jQuery to a Vue CLI 3 project.<\/strong><\/p>\n

1. Install jQuery<\/h2>\n

Use npm to install jQuery into the project:<\/p>\n

npm install jquery<\/pre>\n
2. Add jQuery to Global Scope<\/h2>\n
Update or create vue.config.js in the root directory of the project. Add webpack.ProvidePlugin to inject jQuery globally so it\u2019s accessible throughout the project without needing to import it each time.<\/p>\n
\r\n\/\/ vue.config.js\r\nconst webpack = require('webpack');\r\n\r\nmodule.exports = {\r\n configureWebpack: {\r\n   plugins: [\r\n     new webpack.ProvidePlugin({\r\n       $: 'jquery',\r\n       jQuery: 'jquery'\r\n     })\r\n   ]\r\n }\r\n};<\/pre>\n
3. Use jQuery in Vue Components<\/h2>\n
You can now directly use jQuery selectors and methods inside the methods or lifecycle hooks of Vue components.
\nFor example:<\/strong><\/p>\n
<!-- ExampleComponent.vue -->\r\n<template>\r\n <div>\r\n   <button @click=\"highlightText\">Click Me<\/button>\r\n   <p class=\"text\">Hello from jQuery<\/p>\r\n <\/div>\r\n<\/template>\r\n<script>\r\nexport default {\r\n methods: {\r\n   highlightText() {\r\n     $('.text').css('color', 'red');\r\n   }\r\n }\r\n};\r\n<\/script><\/pre>\n
Notes<\/h3>\n