Using multiple Vue instances instead of components

Question

I have an old .NET MVC project where the Views are built with HTML, bootstrap and jQuery. I'm about to replace jQuery with Vue.JS but I'm unsure of the best approach.

All views are very different from each other, the idea of reuseable components wont be useful as there are no HTML or functions that are used in different views.

I'm thinking that the best approach would be to keep the HTML as it is instead of splitting it up in templates within components, i would init Vue instances on different blocks of the HTML where Vue is needed.

Example, i have a view with 3 tables where one of the tables can be modified by 2 modals.

<div>
<div id=table1></div>
<div id=table2></div>
<div id=table3></div>
<div id=modal1></div>
<div id=modal2></div>
</div>

For this view i would init new Vue Instances for table3, modal1 and modal2. For data and state i will use a shared store: https://v2.vuejs.org/v2/guide/state-management.html

This seem like a good and easy solution for me, but i've also read that this is extremely bad practice so i'm still unsure.

Is this solution bad practice?

Vue is not really suppose to work on the existing HTML like jQuery does. It is data-driven meaning the data is suppose to dictate the generated HTML in most cases. If you are intent on taking the route of simply keeping your HTML "as is" and you simply want to apply Vue to it, you might be in for a really bad time. — Stephan-v
– Stephan-v, Commented Jan 8, 2018 at 13:03
@Stephan-v Well not really "as is", all my tables, selects etc will be generated by the data with v-for and v-bind etc. What i'm asking is if it's bad practice to have a large HTML block with v-for and v-bind in the HTML and then instance multiple instances of Vue on different parts of this HTML block. — Lord Vermillion
– Lord Vermillion, Commented Jan 8, 2018 at 13:12
Even though you might not re-use certain components in that case it might still be better to put it into components to have better project structure, especially if you are going with a shared store/vuex approach. That being said it is pretty difficult to provide advice for an extremely broad question like this without diving into the project. — Stephan-v
– Stephan-v, Commented Jan 8, 2018 at 13:17
Here is an example for your question stackoverflow.com/questions/40173413/… — reinerBa
– reinerBa, Commented Jan 10, 2018 at 9:33

Roy J · Accepted Answer · 2018-01-08 15:15:09Z

0

It doesn't seem to me like you gain much by using separate Vues vs components. You can't apply Vue to table three and the modals without wrapping them in something.

You might want to look at inline-template if your concern is that having components breaks up the HTML structure.

answered Jan 8, 2018 at 15:15

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

reinerBa · Accepted Answer · 2018-01-08 15:19:20Z

You can do it without problems. You can use a global object or another plain object as a shared store if you wish. You can even put the instances into an object as properties:

var myInstances = {}
var sharedState = {table1:{...}, table2:{...}, shared21: {...}, ...} // use properties as you wish

myInstances.table1 = new Vue({
data: { myState: sharedState.table1, shared: sharedState.shared21 },
methods: { open(){...} } // for example
...
})

myInstances.table2 = new Vue({
data: { myState: sharedState.table2, shared: sharedState.shared21 },
methods: { openTable1(){ myInstances.table1.open();  } } // triggers the function open function in table1 instance
})

Just keep in mind, that when you make properties of objects reactive, this reactive feature will not sync with other instances.

This approche works totally well and is much easier to learn than using components. It's of course not perfect and the reasons to use components instead are noted in the vuejs documentation.

Collectives™ on Stack Overflow

Using multiple Vue instances instead of components

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related