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, Jun 23 '21 at 03:50
I wanted to use bootstraps popover feature, for which you need JQuery. Can you suggest any alternatives? — m.tracey, Jun 23 '21 at 03: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 https://therichpost.com/vue-3-bootstrap-5-popover-working-demo/ — Andres Foronda, Jun 23 '21 at 04:32
@m.tracey Perhaps https://thednp.github.io/bootstrap.native/ — Amunium, Jun 23 '21 at 06:22
@m.tracey I read your comments and updated the answer according to your need — WillianBabuu, Jun 23 '21 at 07:23

score 2 · Accepted Answer · answered Jun 23 '21 at 07:22

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

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. — Christine Treacy, Sep 02 '22 at 22:59

score 0 · Answer 2 · answered Sep 06 '22 at 15:08

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/core@2.9.2/dist/umd/popper.min.js",
        type: "text/javascript"
      },
      {
        src: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js",
        integrity: "sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ",
        crossorigin:"anonymous"

      }
]

Using JQuery globally in Vue 3

2 Answers2