Simple Meteor example using Vue

├── .meteor ├── .gitignore ├── release ├── platforms ├── .id ├── .finished-upgraders ├── packages └── versions ├── .gitignore ├── public └── vue-meteor.png ├── .gitmodules ├── client ├── index.html ├── index.css ├── layout.vue ├── index.js ├── blaze.html ├── blaze.js ├── life-cycle.vue ├── blaze.vue └── home.vue ├── package.json └── README.md /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@2.5 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .cache 3 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /public/vue-meteor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor-vue/guide/HEAD/public/vue-meteor.png -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "packages/tracker"] 2 | path = packages/tracker 3 | url = https://github.com/meteor-vue/tracker.git 4 | -------------------------------------------------------------------------------- /client/index.html: -------------------------------------------------------------------------------- 1 | 2 | Simple Meteor example using Vue 3 | 4 | 5 | 6 |

7 | 8 | -------------------------------------------------------------------------------- /client/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | } 4 | 5 | a { 6 | color: #40b883; 7 | text-decoration: none; 8 | } 9 | 10 | h1 { 11 | font-weight: normal; 12 | } 13 | -------------------------------------------------------------------------------- /client/layout.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /.meteor/.id: -------------------------------------------------------------------------------- 1 | # This file contains a token that is unique to your project. 2 | # Check it into your repository along with the rest of this directory. 3 | # It can be used for purposes such as: 4 | # - ensuring you don't accidentally deploy one app on top of another 5 | # - providing package authors with aggregated statistics 6 | 7 | sspia8158r7il1mjtmsr 8 | -------------------------------------------------------------------------------- /client/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import {RouterFactory, nativeScrollBehavior} from 'meteor/akryum:vue-router2'; 3 | 4 | Meteor.startup(() => { 5 | const router = new RouterFactory({ 6 | mode: 'history', 7 | scrollBehavior: nativeScrollBehavior, 8 | }).create(); 9 | 10 | new Vue({ 11 | router, 12 | el: '#app', 13 | render: (createElement) => { 14 | return createElement(Vue.component('layout')); 15 | } 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-guide", 3 | "private": true, 4 | "scripts": { 5 | "start": "meteor run" 6 | }, 7 | "dependencies": { 8 | "@babel/runtime": "^7.0.0-beta.40", 9 | "babel-runtime": "6.23.0", 10 | "jquery": "^3.6.0", 11 | "meteor-node-stubs": "~0.2.6", 12 | "vue": "git://github.com/meteor-vue/vue.git#meteor", 13 | "vue-router": "^3.0.0" 14 | }, 15 | "meteor": { 16 | "vueVersion": 2 17 | }, 18 | "devDependencies": {} 19 | } 20 | -------------------------------------------------------------------------------- /client/blaze.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /client/blaze.js: -------------------------------------------------------------------------------- 1 | import {ReactiveVar} from 'meteor/reactive-var'; 2 | 3 | Template['blaze-template'].onCreated(function () { 4 | this.timestamp = new ReactiveVar(new Date().toString()); 5 | 6 | this.interval = Meteor.setInterval(() => { 7 | this.timestamp.set(new Date().toString()); 8 | }, 1000); 9 | }); 10 | 11 | Template['blaze-template'].onDestroyed(function () { 12 | if (this.interval) { 13 | Meteor.clearInterval(this.interval); 14 | this.interval = null; 15 | } 16 | }); 17 | 18 | Template['blaze-template'].helpers({ 19 | props() { 20 | return { 21 | timestamp: Template.instance().timestamp.get(), 22 | }; 23 | }, 24 | }); -------------------------------------------------------------------------------- /client/life-cycle.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /.meteor/.finished-upgraders: -------------------------------------------------------------------------------- 1 | # This file contains information which helps Meteor properly upgrade your 2 | # app when you run 'meteor update'. You should check it into version control 3 | # with your project. 4 | 5 | notices-for-0.9.0 6 | notices-for-0.9.1 7 | 0.9.4-platform-file 8 | notices-for-facebook-graph-api-2 9 | 1.2.0-standard-minifiers-package 10 | 1.2.0-meteor-platform-split 11 | 1.2.0-cordova-changes 12 | 1.2.0-breaking-changes 13 | 1.3.0-split-minifiers-package 14 | 1.4.0-remove-old-dev-bundle-link 15 | 1.4.1-add-shell-server-package 16 | 1.4.3-split-account-service-packages 17 | 1.5-add-dynamic-import-package 18 | 1.7-split-underscore-from-meteor-base 19 | 1.8.3-split-jquery-from-blaze 20 | -------------------------------------------------------------------------------- /.meteor/packages: -------------------------------------------------------------------------------- 1 | # Meteor packages used by this project, one per line. 2 | # Check this file (and the other files in this directory) into your repository. 3 | # 4 | # 'meteor add' and 'meteor remove' will edit this file for you, 5 | # but you can also edit it by hand. 6 | 7 | meteor-base@1.5.1 # Packages every Meteor app needs to have 8 | mobile-experience@1.1.0 # Packages for a great mobile UX 9 | mongo@1.13.0 # The database Meteor supports right now 10 | reactive-var@1.0.11 # Reactive variable for tracker 11 | tracker@1.2.0 # Meteor's client-side reactive programming library 12 | 13 | standard-minifier-css@1.7.4 # CSS minifier run for production mode 14 | standard-minifier-js@2.7.1 # JS minifier run for production mode 15 | es5-shim@4.8.0 # ECMAScript 5 compatibility for older browsers. 16 | ecmascript@0.16.0 # Enable ECMAScript2015+ syntax in app code 17 | shell-server@0.5.0 # Server-side component of the `meteor shell` command 18 | 19 | akryum:vue-component 20 | dynamic-import@0.7.2 21 | akryum:vue-router2 22 | vuejs:blaze-integration 23 | blaze-html-templates 24 | underscore 25 | jquery 26 | -------------------------------------------------------------------------------- /client/blaze.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 52 | -------------------------------------------------------------------------------- /client/home.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 59 | -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | akryum:npm-check@0.1.2 2 | akryum:vue-component@0.15.2 3 | akryum:vue-component-dev-client@0.4.7 4 | akryum:vue-component-dev-server@0.1.4 5 | akryum:vue-router2@0.2.3 6 | allow-deny@1.1.0 7 | autoupdate@1.8.0 8 | babel-compiler@7.7.0 9 | babel-runtime@1.5.0 10 | base64@1.0.12 11 | binary-heap@1.0.11 12 | blaze@2.5.0 13 | blaze-html-templates@1.2.1 14 | blaze-tools@1.1.2 15 | boilerplate-generator@1.7.1 16 | caching-compiler@1.2.2 17 | caching-html-compiler@1.2.1 18 | callback-hook@1.4.0 19 | check@1.3.1 20 | coffeescript@2.4.1 21 | coffeescript-compiler@2.4.1 22 | ddp@1.4.0 23 | ddp-client@2.5.0 24 | ddp-common@1.4.0 25 | ddp-server@2.5.0 26 | diff-sequence@1.1.1 27 | dynamic-import@0.7.2 28 | ecmascript@0.16.0 29 | ecmascript-runtime@0.8.0 30 | ecmascript-runtime-client@0.12.1 31 | ecmascript-runtime-server@0.11.0 32 | ejson@1.1.1 33 | es5-shim@4.8.0 34 | fetch@0.1.1 35 | geojson-utils@1.0.10 36 | hot-code-push@1.0.4 37 | html-tools@1.1.2 38 | htmljs@1.1.1 39 | id-map@1.1.1 40 | inter-process-messaging@0.1.1 41 | jquery@3.0.0 42 | launch-screen@1.3.0 43 | logging@1.3.1 44 | meteor@1.10.0 45 | meteor-base@1.5.1 46 | minifier-css@1.6.0 47 | minifier-js@2.7.1 48 | minimongo@1.7.0 49 | mobile-experience@1.1.0 50 | mobile-status-bar@1.1.0 51 | modern-browsers@0.1.7 52 | modules@0.17.0 53 | modules-runtime@0.12.0 54 | mongo@1.13.0 55 | mongo-decimal@0.1.2 56 | mongo-dev-server@1.1.0 57 | mongo-id@1.0.8 58 | npm-mongo@3.9.1 59 | observe-sequence@1.0.19 60 | ordered-dict@1.1.0 61 | peerlibrary:computed-field@0.10.0 62 | peerlibrary:data-lookup@0.3.0 63 | promise@0.12.0 64 | random@1.2.0 65 | react-fast-refresh@0.2.0 66 | reactive-var@1.0.11 67 | reload@1.3.1 68 | retry@1.1.0 69 | routepolicy@1.1.1 70 | shell-server@0.5.0 71 | socket-stream-client@0.4.0 72 | spacebars@1.2.0 73 | spacebars-compiler@1.3.0 74 | standard-minifier-css@1.7.4 75 | standard-minifier-js@2.7.1 76 | templating@1.4.1 77 | templating-compiler@1.4.1 78 | templating-runtime@1.5.0 79 | templating-tools@1.2.1 80 | tracker@1.2.0 81 | ui@1.0.13 82 | underscore@1.0.10 83 | vuejs:blaze-integration@0.3.2 84 | webapp@1.13.0 85 | webapp-hashing@1.1.0 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A very simple example Meteor app using Vue-based Tracker and Vue components, and how to integrate with Blaze. 2 | 3 | You can run it: 4 | 5 | ``` 6 | $ git clone --recursive https://github.com/meteor-vue/guide.git 7 | $ meteor npm install 8 | $ meteor 9 | ``` 10 | 11 | If you want to use this version of Vue which supports Vue-based Tracker in your app, you have to: 12 | * add to `package.json` dependencies `"vue": "git://github.com/meteor-vue/vue.git#meteor"` (see [#4652](https://github.com/vuejs/vue/pull/4652)) 13 | * add `https://github.com/meteor-vue/tracker.git` as a [git submodule](https://git-scm.com/docs/git-submodule) to `packages/tracker` (see [#47](https://github.com/meteor/meteor-feature-requests/issues/47)): 14 | 15 | ``` 16 | $ git submodule add https://github.com/meteor-vue/tracker.git packages/tracker 17 | ``` 18 | * add the following to your `package.json`: 19 | 20 | ``` 21 | "meteor": { 22 | "vueVersion": 2 23 | } 24 | ``` 25 | 26 | * add [`vuejs:meteor-integration` package](https://github.com/meteor-vue/meteor-integration) package to get `$autorun` and `$subscribe` inside Vue components 27 | * if you need integration with Blaze, use [`vuejs:blaze-integration` package](https://github.com/meteor-vue/blaze-integration) 28 | 29 | Note: Some life-cycle methods (i.e., `created` and `mounted`) in Vue are run inside a reactive context. 30 | This means that if you call reactive code inside those methods, the code can invalidate the context and trigger update. 31 | Another effect of this is that Tracker reactive code from `created` gets invalidated on the next update, but is never rerun 32 | (because `created` callback is not run again, but `updated` is instead). If you do not want this, consider running reactive 33 | code in `created` inside `Tracker.nonreactive` (to prevent reactivity) or `$autorun` (to limit its scope and make it persist 34 | across updates). 35 | 36 | See [TodoMVC Meteor + Vue.js example](https://github.com/meteor-vue/todomvc/blob/master/client/todos-display.vue) how to use all this together in a 37 | component, in a pure Vue-only Meteor app. 38 | --------------------------------------------------------------------------------