[Vuejs]-Adding jquery to vue js

by

0👍

I had this same issue but I solved it by creating a folder in the public directory called js and added all my template js files there. Then in the index.html, import them like this

  <script src="/js/jquery-modal-video.min.js"></script>

It should work fine

0👍

I ran into the same problem when using Vue 3 and Fomantic-UI, which relies on jQuery. I was getting window.jQuery is not a function.

I was able to solve this by doing the following:

  1. Create a new file called jquery-global.js with the following content:

    import $ from 'jquery';
window.$ = $;
window.jQuery = $;

  2. Import that file in main.js:

    import './jquery-global';

See this GitHub issue.

I was also able to get it working using @rollup/plugin-inject and adding the following to my vite.config.ts:

plugins: [
  inject({
    $: 'jquery',
    jQuery: 'jquery',
  })
]

So that might also be something worth looking into.

Leave a comment