1

I am planing to use semantic UI for building a front end, but would like to also use React or Vue for building components. I am wondering how to combine jQuery based frameworks like semantic UI with virtual DOM based ones like React and Vue. The three recommendations I have heard are:

  1. Use a custom integration like semantic react or vue ui. These integrations try to avoid direct DOM manipulation by transforming jQuery logic to component state based logic. They are incomplete, will always run out of sync with the original one and thus depend on constant support.

  2. Use Vue's mounted hook as in
    export default { mounted() { // jQuery here }, ...}

    or React's componentDidMount as in
    class App extends React.Component { componentDidMount() { // jQuery here } }

    Attach jQuery based logic inside those hooks to the DOM elements. These options seem to work and in many cases of semantic UI effects like dimmer or transition trouble should arise rarely. But it goes against the idea of a virtual DOM as it acts on the DOM directly.

  3. Avoid using jQuery altogether and in the case of semantic UI use a CSS only implementation of it. Then build whatever specific effects you need by making the component depend on states, and states only. This seems the best practice for React and Vue but in the case of a simple transition or dimmer effect it seems a bit like re-inventing the wheel. Also this is just a variation of 1. with the only advantage that you are in control of syncing with latest versions & features of semantic UI.

I would like to ask: what advantages & disadvantages of each of the mentioned approaches do you see? What further approaches exist that I have not mentioned?

B M
  • 3,893
  • 3
  • 33
  • 47
  • Can you narrow down what you want to use Semantic UI to do, and how that should interact with your components? Your question is too broad for good answers. – Roy J Mar 08 '17 at 12:51
  • 1
    Check out [this question](http://stackoverflow.com/questions/25436445/using-jquery-plugins-that-transform-the-dom-in-react-components) and, particularly, [this repo](https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md#portals). It talks about something called **portals**. – Brunno Vodola Martins Mar 08 '17 at 13:06
  • @RoyJ: I am monstly interested in the non-data related features of semantic UI that require JS logic like: dimmer, transition, messages, drop downs, accordion, ... – B M Mar 08 '17 at 13:09

1 Answers1

1

Obviously, the difficulty in combining Vue and a jQuery framework is that Vue expects to be in charge of the DOM, and so does the jQuery framework. You have to keep them from stepping on each other.

The Right Way to do that is to use Vue as your framework and use semantic UI as an implementation detail. I do not think it is practical to make it work the other way around.

The problem with doing it The Right Way is that you don't get as much for free as you would like: you have to create a custom directive for each feature of semantic UI that you want to use. That is where, in Vue, you are allowed to manipulate the DOM.

See also the Wrapper Component Example, which fleshes out your #2 idea.

tony19
  • 125,647
  • 18
  • 229
  • 307
Roy J
  • 42,522
  • 10
  • 78
  • 102