How to import jQuery into $ in a Vue.js 3 / Vite application

Question

I am trying to include jQuery in a Vue.js 3 project, using Vite (https://github.com/vitejs/vite).

I include jQuery in my package.json dependencies:

  "dependencies": {
    "@types/jquery": "^3.5.0",
    "jquery": "^3.5.1",
    "vue": "^3.0.0-rc.1"
  },

I import it in Vite's skeleton's main.js, at the first line:

import * as $ from "jquery";

But this doesn't actually import the jQuery object into $ (it imports something else).

However, if I change it to:

import * as jqueryExports from "jquery";
...
window.$ = jqueryExports.default;

Then everything works correctly.

I'm pretty sure this is not the intended way. Also, I suspect that this issue is not Vite-specific, but I haven't tried it with Webpack.

What is the correct way to import jQuery?

user_1851028 · Answer

Did you try like this:

import $ from "jquery";

or try to simply load it in the header before vuejs