Using JQuery globally in Vue 3

Question

I am simply trying to import JQuery to use globally in my Vue 3 application, but I am getting the error the window.$ is not a function.

I have followed this other article: Add Jquery to Vue-Cli 3

I have defined JQuery in my main.js like this:

window.$ = window.jQuery = require('jquery');

JQuery is installed via npm and this works fine. However, whenever I try to use window.$ in any of my components (under the script tag in my .vue files) I get the error that window.$ is not a function.

How have I managed to mess this up?

Hi, well this is only a suggestion, a personal suggestion as Vue developer with a few years of experience, you don't need JQuery inside a Vue project, Vue provides a lot of benefits, so I really recommend to not use JQuery. If you really want to do it, maybe you can register it as a plugin in the main.js file. — Andres Foronda
– Andres Foronda, Commented Jun 23, 2021 at 3:50
I wanted to use bootstraps popover feature, for which you need JQuery. Can you suggest any alternatives? — m.tracey
– m.tracey, Commented Jun 23, 2021 at 3:56
Are you sure that JQuery is doing something that can't be replaced with VanillaJS?, I only can see events and a document selector in the documentation Check this therichpost.com/vue-3-bootstrap-5-popover-working-demo — Andres Foronda
– Andres Foronda, Commented Jun 23, 2021 at 4:32
@m.tracey I read your comments and updated the answer according to your need — WillianBabuu
– WillianBabuu, Commented Jun 23, 2021 at 7:23

WillianBabuu · Accepted Answer · 2021-06-23 07:22:30Z

2

Since I read your comments and understood what you actualy need. This answer is based on what you actual need but not what you want to do. I believe this method is better Use Boostrap 5 which is not jQuery dependent, you can use all the features like dropdowns, popups without jQuery. in your main.js import the following after installing boostarp via npm install bootstrap

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css' //boostarp

install npm install bootstrap as you will have to include them as I have shown above. as per Bootstrap Doc.

NB: Vue3 does not support boostarp 4, and vue-boostrap use boostrap 5 instead

answered Jun 23, 2021 at 7:22

WillianBabuu

4375 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christine Treacy Over a year ago

so bootstrap 5 is compatible with vue 3 but bootstrap 4 is not? I didn’t know bootstrap 5 wasn’t jquery dependent so that’s great news to me! I’m facing the same issue with a project that relies pretty heavily on bootstrap and subsequently jquery. We’re on bootstrap 4 so my upgrade to vue 3 is not going well lol. Vue-bootstrap is also not compatible with vue3 yet.

kissu Over a year ago

Bootstrap 5 is not compatible with Vue3, it was abandoned. Better alternatives exist anyway: ui-libs.vercel.app This also solves the issue but does not answer the question.

Christine Treacy · Accepted Answer · 2022-09-06 15:08:36Z

0

This is what ended up working For my Vue 3 and Nuxt-bridge app. I made sure I didn't have any versions of bootstrap, popper or jquery in my package.json

I added this to the nuxt.config.js file:

script: [
      {
        src: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        type: "text/javascript"
      },
      {
        src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
        integrity: "sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ",
        crossorigin:"anonymous"

      }
]

answered Sep 6, 2022 at 15:08

Christine Treacy

2223 silver badges10 bronze badges

Collectives™ on Stack Overflow

Using JQuery globally in Vue 3

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related