Vue + jQuery event handlers

Level 1

If you are utilizing a module builder like webpack and you have no guarantee for the order of your imports you can do the following:

Once your root application has mounted, broadcast a custom event on the document:

const app = new Vue({
    el: '#app',
    mounted() {
        $(document).trigger('vue-loaded');
    }
});

And then wrap all of your jQuery code in an event listener for your custom event:

$(document).on('vue-loaded', function () {
    const $toggle = $('.js-accordion-toggle');

    $toggle.on('click', function () {
        $(this).toggleClass('test');
    });
});

1 like

Level 1

@DanteB918 Thanks. I've got the idea.

Cannot make the upper block to work on the root app. Tried in both 'main.js' and 'App.vue': 'ReferenceError: Vue is not defined.'

// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')

// App.vue
<script setup>
    import Xx from './components/xx.vue'
</script>

I had to put it into each '.vue' component as:

export default { 
  mounted() { 
     $(document).trigger('vue-loaded'); 
  }
}

Level 29

Is the only issue that the jQuery event handlers are not working or is none of the jQuery code working?

Level 1

@gych jQuery code seems to work

Level 29

@sband How did you add jQuery to your project?

If you've installed jquery, you can add this to the bootstrap.js file

window.$ = window.jQuery = require('jquery')

Then make sure the bootstrap.js file is imported in app.js

Level 1

@gych I have my project created in Visual Studio from a template Vite Vue .Net6 Controllers with using NodeJS.

Then copied hundreds of .js files I need from other project that use jQuery and pasted them into a folder inside my project.

In 'index.html' I added paths for each .js file:

<script type="application/javascript" src="/scripts/zzz.js"></script>

and they somehow got debugged.

You suggestion didn't work. I feel I did it all wrong way. I have 'app.js' and 'bootstrap.js' that were copied from mentioned project. Not sure I needed them.

Also I just have tried to install 'bootstrap' and 'jquery' as npm packages in my project.

I've no idea which bootstrap is used, if any at all.

Level 29

@sband If you're using node js you can just import the js files in a main js file that you then add as script to the index. That's a cleaner approach than adding all scripts separately to the index.

I thought you were using laravel that's why I used the bootstrap js file as example. But its not the same as the bootstrap css package, that you've propably installed now.

You're using Vue as front-end/client side so than you can add jquery to the vue mainjs file. Alternatively you can create a bootstrap.js file, import jquery and import the bootstrap file in the main.js file. By using this approach you can than later use the bootstrap file to add more imports while keeping the main js file cleaner.

1 like

Level 1

@gych not having solved initial issue with all this (made it cleaner though) I became even more confused

why should i name file as bootstrap.js, it's just a container for other files so i can name it differently (?)
why i installed bootstrap as npm package and what should i do with this? Do I need it?
why i installed jquery as npm package (I had jquery-3.7.1.js file before manually copied into my project with <script..> reference that worked). Having installed it as a npm package should i still reference it somehow and remove that one file?

something is excessive i guess.