Meteor + Vue in 2018

VueJS
1

Hello,

After one year I am back at attempting to use Vue in Meteor. (Main reason is I got excited when I saw that Meteor Nights came back and I set out to give it a shot once more)

So I am sharing a repo where I am “documenting” in the form of git commits the steps I am following to make this integration work.

I also have been taking screenshots of what I find relevant to visualize and attempted to use a simple published google docs, though the images came out weird, so after modifying the generated html a little I came up with the following:

https://htmlpreview.github.io/?https://github.com/ackzell/meteor-vuetify/blob/master/meteor-vuetify.html

Hope anyone looking for how to integrate Vue into a Meteor app finds it useful :slight_smile:

EDIT: The following is the link to the published google doc. I spend too much time trying to enlarge the images I pasted in the beginning again and again so I’ll just leave it as is. https://docs.google.com/document/d/e/2PACX-1vTvnB8eVdTSI9VuzE6ozSw2hkj2P7XLk8-zdw1XFxrIcb4TpInNZ7K_g5euRWV-QxKNI8ccqvm9MmLK/pub

If someone knows how to enlarge those images on the google doc source (other than going one by one manually) I’d be glad to do that. Otherwise, unless I get some spare time to go back and enlarge them, you can always click the “open this image in a new tab” (or whatever your browser allows) to see the original sized images for the first ~dozen images.

Cheers!

16 Likes
2

Nice and detailed tutorial! Thank you!

1 Like
3

Vue works great without Meteor too! We stopped developing in Meteor and do all new web dev with Vue. We are replacing all our Meteor apps with Vue apps. Life after Meteor has been wonderful!

4

@maxhodges, Could you share to develop app without Meteor?
Which back-end?

5

current we are building with Prisma, GraphQL, Apollo, Vuetify, Vuejs)

7

Prisma is GraphQL ORM like https://www.prisma.io/.
You don’t use any backend framework?

8

I know it does :slight_smile:

I am experimenting a kind of “Vue all the things” phase right now though. I have a video series featuring Vue in building a desktop app too.

But here we are in Meteor forums, so I thought I would share it.

1 Like
9

Me too, I’ll get on the project of programming my app with vue+meteor.
Until encountering unsolvable problems, I think Vue is the way to go because its object orientation and the fact that we can encapsulate code and properties in a HTML page. For me, once we see a .vue file structure, how can one wish to use React?

And I wish to have some code splitting so the sensitive code (business logic or knowhow for some processing) does not reach all users.

Remains a well documented integration of vue+meteor+code splitting. @Akryum has a solution, but not sure he has the ressources to document, finish and technical proofing.

One idea to share: Vue.js and Meteor.js are reacting on data changes. Above that, I wish to integrate d3.js for frontend graphics or a more graphical way to show query results. All these tools seem to somehow do the same thing: update data display. Sounds redondant to put them together?

In your meteorless implementation, what about client side mini mongo so queries are looking like immediate? Of course, Apollo, I suppose cannot use anymore a client side DB.

The question is : what Meteor can do or does well, that it is best for doing it and francly cannot be done another way? I am siincerely asking, not ironical here, I do not know the answer.

As another asked, how do you do your server side?

Finally, for Vue 2018, my project is to program a metadata driven templating (with Vue’s Functional components) in which, the least templating is hand programmed. Of course, the logical end is to use a kind of schema such as those in Apollo (I suppose, I did not study Apollo yet) for both UI auto-parametering and input/post validations.

One challenge is to use Vue as object oriented UI where each sub component gets its input value gattered in a wrapper upper component with those of all other inputs in a sub component.

At the end, most of the App structure would be defined in a DB document or a JSON file so it can be setup without programming ugly code.

10

@theara He’s probabbly using AppSync and Lambda for his backend.

11

yeah, same Prisma. It’s ORM-like. I wouldn’t really say it’s ORM!

Prisma provides a mapping from your API to your database. In that sense, it solves similar problems as conventional ORMs.
The big difference is the way how the mapping is implemented. Prisma takes a radically different approach which avoids the shortcomings and limitations commonly experienced with ORMs.

12

Hijacking this post (a bit). For the uninformed, what advantages do you see using Vue over Blaze (not interested in React).?

What downsides would you see to switching over (apart from a lot of refactoring as we’re ready to launch this summer after almost 3 years of coding - yeah, talking about breaking things fast LOL).

TIA,

Andreas

13

A while ago I refactored my app from Blaze to Vue. Here is what I think.

Main advantages of Vue over Blaze in my opinion:

  1. Working component system to break your code down into manageable chunks (specifically, single file components in Vue). Will enable you to keep your sanity even in large code bases. Why this works well in Vue is that the system for communication between parent and children components is simple - props move down the chain, events move up the chain. Blaze had a lot of issues with this leading to messy code. Also, Vue’s single file components make it easy to isolate CSS to components as well, which helps a lot once your project grows.

  2. Very efficient documentation to get new devs up to speed quickly. Evan You has a special talent for reducing the learning curve down to the minimum. Many other open source projects could learn from this.

  3. Integrated router (Vue Router) and state manager (Vuex). Both are standard problems in apps and hence have standard solutions with Vue. Reduces paralysis by analysis considerably. Point 2 applies to these as well.

  4. Scale. A lot more people use Vue than Blaze. It is much easier to (1) get help on specific issues, (2) find devs for your project, (3) find third party components for your app. Going mainstream has its benefits, no matter what the emo kids say :slight_smile:

  5. Performance. Vue is faster than Blaze (https://github.com/mitar/meteor-web-rendering-framework-benchmark).

Disadvantages:

  1. Refactoring can be a headache. Especially if the Blaze app is full of spaghetti code and not modular (which it seems to me most Blaze apps tend to be).

  2. Although Vue is very popular, the number of publicly accessible Vue + Meteor projects is less than Blaze projects. Makes the initial steps a bit more taunting. But as we can see @ackzell is seeking to change that (many thanks to him!). Also, a project that helped me a lot was this by @efrancis : https://github.com/ejfrancis/Meteor-Vue-Enterprise-Starter

But above all I’d say, if you’re 3 years into an existing project at this point, just go with what you have now and see how things progress. Permanent refactoring is a cruel mistress. At the end your users don’t care much about technical details. If the project gets off the ground, then see if and when to refactor.

6 Likes
14

I think @vooteles’ answer is very on point. Also he stated he has the experience of refactoring, so knows both Blaze and Vue. Thanks for sharing!

I can’t really talk much about Meteor + Vue as of yet, but you can see I am learning and sharing what I find.

Vue itself is quite a pleasant experience, Single File Components for instance are great but I would consider refactoring later on as well, as they say: If ain’t broken, don’t fx it.

15

Hi, I wish to start a Meteor+Vue+Grapher project.

What most up-to-date integration package could integrate these with least developped example app in it? I mean, just what is needed for the integration. Thanks.

16

I’m very curious about Grapher myself, but I might first attempt to use the out-of-the-box Meteor data infrastructure (the pub-sub system) and then branch off to using Grapher sometime in the future, it does look very promising, but I want one learning curve at a time I guess.

As for which packages, you can take a look at what has worked for my repo and probably make out the versions from it :slight_smile:

17

glad you found my Meteor Vue starter kit helpful :slight_smile: once you get the integration done it’s really a delight to work with

2 Likes
18

Do sourcemaps for Vue components work for anyone? Breakpoints don’t work in dev tools. Is this the state of Meteor + Vue in 2018?

19

Not going to argue that they should be in, but given the latest developments on the Meteor Vue area, I think we are catching up.

20

So we have an app that we developed and still running on Meteor 1.2 blaze +ionic , and blaze + material design mos of the app functionality is on the backend and any key functionatliy in the app is basically coming from the cordova plugins . That being said we want to upgrade to latest Meteor version and still want to reap the benefits of the reactivity , hotcode push and most of all make our life easier in building the app …

I cannot tell how much easier it is with the meteor build to build the apps for ios and android . five stars to that.

I have gone through different hybrid app development options and cannot seem to find one simple way to build an app or equivalent to “meteor build”

wonder what other alternatives are out there to make the whole app building as simple as meteor … while react native option might offer lot of benefits , i am more inclined to blaze templates as it is most suited for apps with less ui but more backend logic . Does vue +meteor off any significant benefits ?

Any suggestions anyone?

1 Like
21

Having switched from Blaze to React and from React to Vue I might be able to give you a small overview.

About React
I’ve switched from Blaze to React, because it seemed like a more future prove choice at that time. One of my main reasons was that non-meteor users were huge fans of React and simply didn’t want to use Blaze. When I switched to React I’ve faced some major pains. One being the unsupported React Router v4 that broke everything. I felt that I had to do so much boilerplating and I still have to… A plus side for React with Meteor is Meteor’s awesome way of integrating it with Tracker. Love that!

About Blaze
I love Blaze. It is a natural fit for Meteor. I love the templates that have the Handlebars / Mustache flavors. Since its actively maintained by the Meteor community I would still recommend it. I hope (and I notice that it does) that Blaze one day will stand on its own and keeps on being that wonderful system that integrates seemlessly with Meteor. Also all of Meteor’s accounts packages and templates have drop-in components that you can use for login/logout etc.

About Vue
Though Vue is not a first class citizen of Meteor, it does feel like a much better fit for Meteor then React. Like Meteor, Vue has an awesome ecosystem of packages that fit seemlessly. Exactly that bit that I miss with React. The Vue community is thriving and has people that actively contribute to Vue’s integration into Meteor including one of the core members of the Meteor team. Fun fact: Creator was once a Meteor developer. Also both documentations shine and blow away their competitors. Just look at it: https://vuejs.org/v2/guide/

Depending on your taste and goal I would certainly say that Vue has its advantages, but it simply depends on what your requirements are. Mine are low entry, great community, not perfect, but still painless integration with Meteor, no (visible) JSX, just templates.

3 Likes