Meteor Vue Boilerplate discussion on default functionality

I would like to make this boilerplate really valuable for all and am in doubt on what to add, what to abstract away and what to put into packages. Lets have a discussion… Some of the things that I’m thinking about to put in:

  • Pub/Sub + Minimongo + Tracker using vue-supply (using akryums meteor-vue-tracker package)
  • Apollo (also according to Akryums package and boilerplate)
  • Unit Testing with Jest
  • Acceptance Testing with Cypress
  • An accounts system that integrates with Meteor’s

I can also turn this thing into a framework, completely abstracting away the generic functionality like Nuxt did for SSR and Prerendering maybe with a command to either use Meteor Vue with Apollo or with Minimongo (ofcourse with out of the box SSR support).

Here’s the boilerplate btw: chris-visser/meteor-vue-boilerplate

What do you think? Any other suggestions or preference?

1 Like

I think we need some variants of the boilerplate. To start, a simplified one without vue-supply and vuex. This will an easy entry into Meteor Vue for people coming straight from Blaze, or when the type of application would not benefit from those…

On the accounts system item, that is immediately available with Meteor Pub/Sub + Minimongo + tracker, no? Or are we talking about the Apollo integration? BTW, Apollo integration should be a separate variant of the boilerplate, so that people not requiring it can start quickly without having to nitpick and remove stuff.

I like the variants part. I’m rebuilding my blog from Nuxt to Meteor so that might be a good one to open source based on this boilerplate.

I can also make one with the accounts system and have it publish a extra user fields on login (common question o how to do it).

There’s also a question on how to do optimistic UI updates with Meteor and Vue.

In my opinion what the Meteor community needs most is an example of a Vue integration with the absolute minimum of features. Just to show how Meteor’s and Vue’s reactivity live side by side. So, on the top of my head, only the following packages:

  1. akryum:vue-component
  2. vue-meteor-tracker
  3. vue-router

Maybe I am mixing the purposes of the guide and the boilerplate here too much, but to get the most benefit, I’d suggest to start with the minimum right now. Most benefit with least amount of work. Just to show new users that the integration part between Vue and Meteor is really a very thin layer (and that being a very good thing!).

That is exactly what I was trying to imply with a ‘simplified variant’ of the boilerplate. For example, we could have something like:

  • Basic Boilerplate: as @vooteles proposes (akryum:vue-component, vue-meteor-tracker, vue-router), just showing how to quick start a simple Meteor + Minimongo + PubSub + Methods + Accounts.
  • Advanced Meteor Vue: akryum:vue-component, vue-meteor-tracker, vuex, vue-supply, akryum:vue-ssr, akryum:vue-router2
  • Apollo Boilerplate: a few ? here… what to do with accounts? keep DDP?
3 Likes

This is a great initiative and I think it’s the best thing the community can offer to Meteor as of now.

For React, Angular and Blaze Meteor offers tutorial and a guide. Historically things started with a tutorial and then later the guide was added for advanced users.

Have you guys thought about the tutorial part and whether it’s a good idea to start with that minimal todo app using Meteor/Vue using the Basic Boilerplate @hluz recommended above?

The todo tutorial would be a nice addition. Can I file pull requests for that one too?

Also based on your feedback I will create different boilerplates for some of the common scenarios:

  • One with Minimongo + pub/sub
  • One with Basic SSR and code splitting (like now)
  • One with Apollo (similar if not the one that @akryum has already)
  • One with auth using Meteor’s auth system + minimongo
1 Like

I think this is what you want:

1 Like

Nice! I was just looking for something like this. New to Vue, I’d want a simple way to:

  • Pub/sub/methods
  • Meteor accounts
  • Basic SSR
  • Code splitting (optional)

Thanks!

Hi, how to i can access req or cookies in context,

VueSSR.createApp = function (context) {
const tokenLogin = context.req.cookies['meteor_login_token'] || context.cookies['meteor_login_token']
})