Basics: Getting started w Meteor + VueJS

I’d like to start a green-field project, that hopefully will become an admin co-application for another software package I built with Meteor/Blaze in production.

I am considering using Apollo and VueJS. The library seems to integrate the two. Reading through the issues on the library, there seems to be some open questions:

``> What client side store to use in place of Redux/Minimongo: Currently Vuex is used with VueJS, but somehow this may need special integration with Client side Apollo?

``> There may be some struggle with server side queries per this issue:

Any other issues I need to be aware of before going this route?

``> What are the limitations relative to Meteor proper?

``> What about reactivity, are we out of luck at the moment going this route?

``> What about the Meteor Accounts system, will I have to roll my own? Ideally I’ll want to tie into the same MongoDB and Accounts collections used by my Meteor/Blaze application.

``> Is there going to be some semi-official endorsement of this package by MDG at some point?

Also, there seems to be just one writeup on using VueJS and Apollo found here: are there more, where can I find more resources on this matchup.

Also, @thea, may we have a VueJS category on this forum please?

Thanks –


We do have an apollo category on the forums, and I guess this post falls under it :slight_smile:

Thanks @M4v3R, your right, this post may be Apollo or Apollo+VueJS, but if myself or others invest in VueJS and need help just with VueJS, it would be nice to filter on a VueJS category like we can on React or Blaze.

I’d very much like your take on my situation… why did you choose to go Meteor + VueJS instead of Apollo + VueJS? I may end up going the route you did, but first I want to investigate the Apollo option.

1 Like

I considered Apollo, but went with Meteor and MongoDB because that’s what I had experience with, and the toolchain is pretty stable and mature, while Apollo and its integrations are fairly recent to the scene and I didn’t have any prior experience dealing with them. So this was a purely business decision, really. I am paying close attention to Apollo because I like the premise of GraphQL but I’m waiting for it to be mature and stable enough to actually use in my commercial projects.

Also, Meteor is more than just a data layer, it’s also a build tool and provides you with easily accessible server-side methods. I believe you cannot write a complete application with Apollo alone, you have to add something else to it and you have to deploy it somehow. So what I would like to investigate in the future is Meteor + Apollo + VueJS stack.

1 Like

(Off-topic, sorry – @aadams just created a Vue category here:

1 Like

Great point. Maybe I’m jumping too quickly on this. Maybe the better path at this point is VueJS + vue-component + Meteor. You said before I’d also need to add the vue-tracker package going the Meteor + VueJS route – is there anything else I’ll need to get started?

These are the packages I have added in my project:


The first one is the main integration package, second one allows you to use single file component .vue files in your project, and third one integrates Vue Router.



With just the below libs, you’re able to subscribe to publications, and use mini-mongo for client side data fetching?


Do you make use of Tracker as well? Also, do you remove Blaze templates?

With Vue you don’t need to use Tracker because Vue has its own dependency tracking system, which is more robust than Meteor’s. That being said, with akryum:vue package you get integration with Meteor’s reactive sources, mini-mongo on the client side and other Meteor goodies, see:

As for Blaze templates, I removed them because I didn’t need Blaze in my project, I exclusively used .vue components.

Thanks for all your help/advice.

You remove Blaze template, and for my new admin app I might too. But what about Meteor Accounts, doesn’t this use Blaze templates?

Yes and no. accounts-ui package uses Blaze, but the core accounts packages (like accounts-password) does not. This means that you need to create your own login/registration form UI, but you can still use all the server side methods: Meteor.loginWithPassword, Accounts.createUser and others.

For me not using accounts-ui was not really a problem, because I wasn’t a fan of how it looked and worked in the first place and I ended up implementing it myself anyway even before I’ve learned about VueJS.


I found this:

and from the Angular integration docs:

Maybe that helps.

1 Like

Me too, I am looking for starting a Vue+Meteor+(Apollo or not).

Trying to figure out the best way to integrate these technologies, one of several questions remain:

Should we install Atmosphere modules, or NPM?
@M4v3R, suppose you use akryum atmosphere modules. Am I right?

Yes, I’m using Atmosphere to install integration packages made by Akryum. But it still requires you to install VueJS separately via NPM or other means.

Hi @M4v3R, A bit out of topic this main, maybe you could take a look and comment on the issue I opened on This is the github for his version 2 for Vue 2. I wish to be functional ASAP on this environment. Thanks. Marc

Not sure exactly what problem do you have. The easiest way to start would be to clone the example project and run meteor npm install inside:

git clone
meteor npm install

And then just type meteor to run it.

Hi, do you still need Blaze or you want to fully use of VueJS component for rendering part? Mostly i will do like this because i dont use Blaze at all.

meteor create meteor-vue-example
cd ./meteor-vue-example
meteor remove blaze-html-templates
meteor add static-html akryum:vue akryum:vue-component session akryum:vue-router2
meteor npm install --save vue@^2.1.6
meteor npm install

Let me know if it is not working. thanks.

Reference : Meteor Vue Example

1 Like

Thanks for your replies. It still does not work.
I do not use Blaze nor React.

Here is what I did to install this project. but it does not work. (empty browser):
(only the page name gets in on the tab). Maybe you have a better way to install it.

Other behaviour: If I add Hello! in <body> before the <app> tag, it displays shortly at top left corner a fraction of second, then disapears and is displayed about 2 lines billow and a bit indented to the right. Nothing else appears.

If I copy my custom files from my previous project of version 1, it does not work, so I prefer to investigate first with this project code only.

What I dit:
In Git Windows PowerShell: git clone
In DOS shell:

cd meteor-vue2-example
meteor-vue2-example>meteor npm install
meteor-vue2-example>meteor update --patch

Also, as you suggested:

F:\meteor-sites\meteor-vue2-example>meteor remove blaze-html-templates
blaze-html-templates is not a direct dependency in this project.

F:\meteor-sites\meteor-vue2-example>meteor add static-html akryum:vue-component
session akryum:vue-router2
Currently using static-html with version constraint 1.1.12_1.
The version constraint will be removed.
akryum:vue-component without a version constraint has already been added.
Currently using session with version constraint 1.1.6.
The version constraint will be removed.

Changes to your project_s package version selections:

akryum:vue-router2  added, version 0.0.2

static-html: Define static page content in .html files
session: Session variable
akryum:vue-router2: Easy vue routing for Meteor - vue-router 2.x

[[[[[ ~\F\meteor-sites\meteor-vue2-example ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Meteor is available. Update this project with 'meteor update'.
   [HMR] Dev server listening on port 3003
   Processing files with ecmascript (for...  -
Some packages depends on these peer dependencies:
 { dependencies: { vue: '^2.0.0-rc.8', 'vue-router': '^2.0.0-rc.5' },
  devDependencies: {} }

Your package.json has been updated, now running: meteor npm install

meteor-vue2-example@ F:\meteor-sites\meteor-vue2-example
`-- vue-router@2.1.1

I am still not shure when I need to put --save, and why it says meteor npm install is now running.

ALSO, Chrome Vue plug-in says Vue.js not detected. And in console: [Vue warn]: Error when rendering anonymous component:


as you can see in client/main.js file, there are declaration of meteor boilerplate.

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

Template.hello.onCreated(function helloOnCreated() {
  // counter starts at 0
  this.counter = new ReactiveVar(0);

  counter() {
    return Template.instance().counter.get();
  'click button'(event, instance) {
    // increment the counter when button is clicked
    instance.counter.set(instance.counter.get() + 1);

You need to delete all files in client folder because it not going to work because it is boilerplate that create automatically when you run meteor create and of course your project will not detect as Vue app!

The good reference for you to start is to see in this folder. Link. However, i strongly suggest you to start with boilerplate that already being created by Akryum and already being suggested by @M4v3R.

I cant confirm on this one. Maybe meteor detect you are not running meteor npm install and automatically run meteor npm install for you. Maybe