Code separation & package questions

VueJS
1

So, I was wondering how I should separate my components as some of them have lots of HTML and dynamic parts depending on user roles & other stuff.

Lets say we have manager and client. Which would you prefer?

1: Render different components for only manager or for only client, depending on their role. This would check once and render the appropriate component
2: Render a single component for all user roles. This would contain lots of conditional stuff (imagine with 4 different roles) and would have all the JS in one component.

I was thinking, maybe #1 would be better for less computation, cleaner HTML/CSS and smaller file sizes since it wouldn’t have all the JS for every user role. Thoughts?

Also I don’t quite get why we are using both NPM and Atmosphere packages.

My Meteor packages

  • akryum:vue-component
  • akryum:vue-router2

NPM packages

  • vue
  • vue-meteor-tracker
  • vue-router

Is that necessary to have them in Meteor packages? If yes, what do they add? Wouldn’t it be the same thing to use from NPM? My guess is, it has something to do with reactivity but I’m not really sure.

2

I’d prefer the 1st solution.

This is responsible for compiling and hot-replacing Vue components in your Meteor App and as such needs features exclusive to Meteor packages.

This is a set of helpers to put routes in a more Meteor-ish style (plus a handy special file format). It’s completely optional.

Those are the mains packages for a meteor+vue app to work. vue-meteor-tracker doesn’t need any Meteor package feature, so I turned it into a (more standard) npm package. vue and vue-router are official Vue packages that have nothing to do with Meteor in themselves and that can be used in any web app.

3 Likes
3

Thanks for the info akryum.

Two questions about vuex (not the akryum:vuex);

1: Should I fetch data and commit mutation from a component or should I fetch data in Vuex actions?
2: Should I just store stuff in Vuex that I will reuse in other components (like currentUser for example) or should I move all the app logic to Vuex?