0

The project I'm working on is a Rails app with jQuery running on a lot of various parts/interactions. I'm implementing micro frontends in Vue 3 for new features and functionality using a modified hypernova-vue.

At first, with limited functionality, everything seemed to work fine together. But now I'm adding more complex features (modals, popovers, deeply nested components) when I try to load the pages I get a list of $(...).ready is not a function errors.

It happens consistently when I use the Teleport feature in Vue for a modal.

Removing the Teleport tags seems to resolve the error, but it breaks the UI. The modal content from the Vue component needs to be teleported to another div on the page to display correctly.

Stickel
  • 11
  • 2
  • Just add `` to `` or before all JS in `` [How jQuery Works](https://learn.jquery.com/about-jquery/how-jquery-works/) – ramin Jul 22 '23 at 00:52
  • 1
    jQuery was added to `` before most of the other JS, so it was something else. I removed a vueuse composable and the conflicts seem to have disappeared for the most part. I'm going under the assumption that was the problem. – Stickel Aug 08 '23 at 15:34

0 Answers0