Im keeping my subscriptions in the templates since I use Flow Router. I will share the list of packages I currently have installed.
jquery@1.11.10
flemay:less-autoprefixer
reactive-var@1.0.11
raix:handlebar-helpers
audit-argument-checks@1.0.7
browser-policy@1.0.9
natestrauser:animate-css
dburles:collection-helpers
meteor-base@1.0.4
mobile-experience@1.0.4
session@1.1.7
tracker@1.1.1
logging@1.1.16
reload@1.1.11
random@1.0.10
ejson@1.0.13
spacebars@1.0.12
check@1.2.4
service-configuration@1.0.11
accounts-facebook@1.0.11
accounts-twitter@1.1.12
okgrow:router-autoscroll
percolate:paginated-subscription
standard-minifier-css@1.3.2
standard-minifier-js@1.2.1
osv:mongo-counter
aldeed:collection2
lepozepo:s3
mongo@1.1.14
semantic:ui
juliancwirko:s-alert
meteorhacks:search-source
http@1.2.10
kadira:flow-router
kadira:blaze-layout
blaze-html-templates@1.0.4
tomwasd:flow-router-seo
zimme:active-route
velocityjs:velocityjs
czbaker:apac
meteorhacks:kadira
wizonesolutions:canonical
meteorhacks:ssr
erasaur:meteor-lodash
percolate:synced-cron
astrocoders:one-signal
juliancwirko:s-alert-stackslide
shell-server@0.2.1
meteortoys:allthings
ecmascript
raix:rssfeed
So I think from this I will need to install:
akryum:vue-component
akryum:vue-router2
akryum:vue-less
vue-meteor-tracker
I know the basics on how Vue components works but Im still not sure where I can put meteor code. I need to add the meteor
object to my Vue components and hook up all the Mongo finds and subscription there to my data? In the meteor
object I seen in some example a data
part as well. Whats the purpose of this since the vue object itself also has a data
part. Is it for meteor specific stuff that does not work for the vue data part? Example here
I don’t have any actions in higher level components written for child classes I think. I have some global helpers I use across the applications.
For routing I use the following pattern, pretty standard:
<template name="applicationLayout">
<div class="site">
<header class="cd-morph-dropdown">
{{> header}}
</header>
<div class="site-content">
{{> Template.dynamic template=main}}
</div>
{{> footer_button}}
<footer class="dynamic-footer">
{{> footer}}
</footer>
</div>
{{> search_overlay}}
{{> login_overlay}}
{{> product_popup}}
{{> sAlert template='custom_salert'}}
</template>
I then use this in my routes.js file like:
FlowRouter.route('/', {
name: "home",
action: function(params, queryParams) {
BlazeLayout.render('applicationLayout', {main: 'home'} );
},
});
As of my understanding it would not be to hard to change this into whats described [here] (https://github.com/Akryum/vue-meteor/tree/master/packages/vue-router2#app-layout) right?
I will let you know as I am running into problems and please let me know if you think there will be any issues migrating this. Thanks a lot!