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?

Answer 1

Did you try like this:

import $ from "jquery";

or try to simply load it in the header before vuejs

<script  src="https://code.jquery.com/jquery-3.5.1.min.js"  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="  crossorigin="anonymous"></script>

Answer 2

Well, using vite and Vue, I imported jQuery and its plugins as follows:

import './assets/js/semantic.min.css'
import  './assets/js/jquery-3'
import './assets/js/semantic.min.js' 

This code worked for me and I could use jquery in all components though I don't think that it is the right way to use jQuery and its plugins in Vue