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 https://github.com/Akryum/vue-apollo 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: https://github.com/Akryum/vue-apollo/issues/7 Currently Vuex is used with VueJS, but somehow this may need special integration with Client side Apollo?
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?
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.
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.
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?
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 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: https://github.com/Akryum/vue-meteor-tracker#usage
As for Blaze templates, I removed them because I didn’t need Blaze in my project, I exclusively used .vue components.
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.
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 https://github.com/Akryum/meteor-vue2-example/issues/3 This is the github for his version 2 for Vue 2. I wish to be functional ASAP on this environment. Thanks. Marc
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.
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 git@github.com:Akryum/meteor-vue2-example.git
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>meteor
[[[[[ ~\F\meteor-sites\meteor-vue2-example ]]]]]
=> Started proxy.
=> Started MongoDB.
=> Meteor 1.4.2.3 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);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'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.
