Basics: Component building in Meteor + VueJS

VueJS
81

So weird, I updated the repo, not using router, just loading App.vue, still getting the same style tag bug, I tried reinstalling meteor, also didn’t help…

I see in your screenshot how your logs are coming out fine, I don’t understand what’s different about my environment… Are you also on windows?

(thx for your time)

82

I’m on Windows 10 using Meteor 1.4.2.3.

83

same here… ahhh i’m going crazy, doesn’t make sense… what could possibly make the vue modules export just the style tag?

84

What is the result of meteor npm list and meteor list?

86

hmm now that i’m looking at it, i was sure i switched blaze-html-template to static-html, I’ll try doing that now

87

@webkit, it seems you’re on the step BEFORE getting components working and building them – you’re just trying to set the project up right.

There’s another thread about getting your project set up here: Basics: Setting up a Meteor + VueJS project, it might help you to have the correct packages in your project to start. :slight_smile:

88

I have the exact same versions with no error.

89

The frustration is that I was already in the midst of developing and everything was working perfect (Meteor, Vue, Vuex, VueRouter) except for the build times… in the process of trying to fix it i encountered bugs i never seen, now i’m just trying to reproduce them…

changing to static-html didn’t help the problem :frowning:

90

You may have an issue with Meteor then…

91

thats why i tried re-installing it which did nothing… anyways sorry for clogging up the forum, thx for your help… hopefully i’ll be able to figure this out and give an update.

92

No, you’re not clogging up anything, it’s just this thread is dedicated to Component building. Try starting a new thread and we’ll all try to pitch in an help you the best we can! :slight_smile:

Most of us are still learning the basics of Meteor + Vue integration here, so there’s bound to be issues for most to start. We need to stick together here and help each other out, specially in these early days. :slight_smile:

2 Likes
93

Just an update: Never been able to solve the issue on my pc laptop, but I pulled out my ol’ macbook, and everything works amazing… HMR with vue and blaze, builds are fast… everything is good…!

@akryum I have a question regarding the vue-meteor-tracker package, I saw in your github examples that I can use the ‘meteor’ prop in my vue components, but what if i want the sub/pub logic in my Vuex store? and I’m using the regular npm Vuex… is it possible to use your tracker package with regular Vuex package? thx.

94

is it possible to use your tracker package with regular Vuex package? thx

You can’t use it with vuex 2. I have a few ideas of an mom package with a more generic system, but I didn’t have time to make it yet.

95

Wait, we can’t use vuex2 and your tracker package together? Seems there’s always some roadblock :frowning:

96

You can! Use Vuex to pass variables to Tracker-computed values. You can also use Tracker.autorun to store things inside vuex. But there is no equivalent to what the akryum:vuex did yet.

98

Ok thanks akryum. It would be amazing if we could ‘reactivize’ (sync?) state props right from the Vuex store… thanks for you’re great work anyways, for now I’ll try using Meteor’s Tracker in Vuex.

100

Do you mean using Tracker.autorun in vuex store (mutations? actions? state? getters?) or in components (and then calling action to update the state)?

101

What I did was use it right in my Vuex action:

export const initInventoryState = ({ commit }) => {
    Tracker.autorun((c) => {
        Meteor.subscribe('inventory')
        let inventory = Inventory.find({ }).fetch()
        commit('UPDATE_INVENTORY_STATE', inventory)
    })
}

Now in component I mapState > inventory and its reactive to db.

4 Likes
102

Is anyone using Stylus / PostCSS plugins successfully inside their Vue components (.vue files) ?

using plugins such as Lost, Rupture, Rucksack, etc… working great on my .styl files, but I want them to work inside my Vue components…

Has anyone got this working?

thx

103

Thanks a lot, I didn’t think of that. That indeed looks like a great idea. The Minimongo directly in Vuex approach is in fact incredible with how clean it makes the components.

But I’m not sure if it’s the right place for subscription. This way, I imagine that even if we don’t use these data in our component, all the subscriptions of whole application are still alive and kicking (and wasting resources).

That’s why, in case this is true, I’d rather do operations on Minimongo in actions, but keep subscriptions at a component level, so that they get destroyed once the component is gone.

As for Stylus plugins, never tried.

1 Like