All Projects → meteor-vue → guide

meteor-vue / guide

Licence: other
Guide to integrate Meteor and Vue.

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

A very simple example Meteor app using Vue-based Tracker and Vue components, and how to integrate with Blaze.

You can run it:

$ git clone --recursive https://github.com/meteor-vue/guide.git
$ meteor npm install
$ meteor

If you want to use this version of Vue which supports Vue-based Tracker in your app, you have to:

  • add to package.json dependencies "vue": "git://github.com/meteor-vue/vue.git#meteor" (see #4652)

  • add https://github.com/meteor-vue/tracker.git as a git submodule to packages/tracker (see #47):

    $ git submodule add https://github.com/meteor-vue/tracker.git packages/tracker 
    
  • add the following to your package.json:

    "meteor": {
      "vueVersion": 2
    }
    
  • add vuejs:meteor-integration package package to get $autorun and $subscribe inside Vue components

  • if you need integration with Blaze, use vuejs:blaze-integration package

Note: Some life-cycle methods (i.e., created and mounted) in Vue are run inside a reactive context. This means that if you call reactive code inside those methods, the code can invalidate the context and trigger update. Another effect of this is that Tracker reactive code from created gets invalidated on the next update, but is never rerun (because created callback is not run again, but updated is instead). If you do not want this, consider running reactive code in created inside Tracker.nonreactive (to prevent reactivity) or $autorun (to limit its scope and make it persist across updates).

See TodoMVC Meteor + Vue.js example how to use all this together in a component, in a pure Vue-only Meteor app.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].