CODEWITHSUNDEEP
javascriptjqueryvue.js
m.tracey
m.tracey

Reputation: 333

Using JQuery globally in Vue 3

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?

Upvotes: 1

Views: 3427

Answers (2)

Christine Treacy
Christine Treacy

Reputation: 212

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"

      }
]

Upvotes: 0

WillianBabuu
WillianBabuu

Reputation: 437

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

Upvotes: 2

Related Questions