maxccarvalho's avatar

Multiple Vue instances

Hi, I'm migrating a big e-commerce application to Vue and I have some questions. The current code base has lots of js in line code, a mix of libs (jQuery and PrototypeJS). I'll move everything to Vue and ES6 but, til then I need to keep the things working and adding Vue step by step.

So, I now that I can create multiple instances pointing to multiple root elements. But, what to do in cases when I don't have the element in a particular page? Vue is throwing a warning in such cases. This is a big problem or I can live with that? Is it possible to run Vue components without binding the new Vue() to a root element?

Thanks :-;

0 likes
5 replies
DarkRoast's avatar
Level 8

You could just check if the element is on the page:

if (document.getElementById('root1')) {
    const app1 = new Vue({ el: '#root1' })
}
hendranucleo's avatar

Do you creating SPA? with one bundle javascript file? if not just set different js file for different page, and instantiate vue only if needed.

1 like
jekinney's avatar

If it works, it works. Due different browsers and compatibility a lot of plugins will throw console errors in certain browsers but still work.

I have migrated a few sites from a mess of JavaScript to vue over the past year. Obviously your situation maybe different, but if you're not actually adding needed functionality I suggest creating a branch and work on migrating to vue. Once done actually push the code versus pushing per page (or how ever often).

maxccarvalho's avatar

I believe @DarkRoast solution seems to be pretty good since I'm in "migrating status".

@hendranucleo one of the goals is to have one (small as possible) js file to rule everything.

Please or to participate in this conversation.