Vue 2.0 compatibility

Author: Akryum

.meteor/packages

@@ -6,7 +6,7 @@
 
 meteor-base@1.0.4             # Packages every Meteor app needs to have
 mobile-experience@1.0.4       # Packages for a great mobile UX
-mongo@1.1.11                   # The database Meteor supports right now
+mongo@1.1.12                   # The database Meteor supports right now
 reactive-var@1.0.10            # Reactive variable for tracker
 jquery@1.11.9                  # Helpful client-side library
 tracker@1.1.0                 # Meteor's client-side reactive programming library
@@ -28,7 +28,6 @@ akryum:vue
 akryum:vue-component
 akryum:vue-router
 akryum:vuex
-akryum:vue-apollo
 akryum:vue-i18n
 akryum:vue-i18n-ui
 akryum:vue-less
@@ -38,4 +37,4 @@ akryum:vue-jade
 akryum:vue-coffee
 
 use-vue-component
-shell-server
+shell-server@0.2.1

.meteor/release

@@ -1 +1 @@
-METEOR@1.4.1
+METEOR@1.4.1.1

.meteor/versions

@@ -1,11 +1,10 @@
 accounts-base@1.2.11
 akryum:npm-check@0.0.3
-akryum:vue@1.0.4
-akryum:vue-apollo@0.0.9
+akryum:vue@1.0.5
 akryum:vue-coffee@0.0.2
-akryum:vue-component@0.6.6
-akryum:vue-component-dev-client@0.0.8
-akryum:vue-component-dev-server@0.0.1
+akryum:vue-component@0.7.0
+akryum:vue-component-dev-client@0.2.0
+akryum:vue-component-dev-server@0.0.2
 akryum:vue-i18n@0.0.3
 akryum:vue-i18n-ui@0.0.5
 akryum:vue-jade@0.0.1
@@ -15,22 +14,22 @@ akryum:vue-sass@0.0.4
 akryum:vue-stylus@0.0.4
 akryum:vuex@0.3.0
 allow-deny@1.0.5
-apollo@0.0.3
+apollo@0.1.1
 autoupdate@1.3.11
 babel-compiler@6.9.1
 babel-runtime@0.1.11
 base64@1.0.9
 binary-heap@1.0.9
-blaze@2.1.8
-blaze-tools@1.0.9
-boilerplate-generator@1.0.9
+blaze@2.1.9
+blaze-tools@1.0.10
+boilerplate-generator@1.0.10
 caching-compiler@1.1.7
-caching-html-compiler@1.0.6
+caching-html-compiler@1.0.7
 callback-hook@1.0.9
 ccorcos:subs-cache@0.1.0
 check@1.2.3
 chuangbo:cookie@1.1.0
-coffeescript@1.2.4
+coffeescript@1.2.4_1
 ddp@1.2.5
 ddp-client@1.3.1
 ddp-common@1.2.6
@@ -45,8 +44,8 @@ es5-shim@4.6.14
 fastclick@1.0.12
 geojson-utils@1.0.9
 hot-code-push@1.0.4
-html-tools@1.0.10
-htmljs@1.0.10
+html-tools@1.0.11
+htmljs@1.0.11
 http@1.2.9
 id-map@1.0.8
 jquery@1.11.9
@@ -56,7 +55,7 @@ localstorage@1.0.11
 logging@1.1.15
 meteor@1.2.17
 meteor-base@1.0.4
-meteorhacks:fast-render@2.14.0
+meteorhacks:fast-render@2.16.0
 meteorhacks:inject-data@2.0.0
 meteorhacks:meteorx@1.4.1
 meteorhacks:picker@1.0.3
@@ -67,12 +66,12 @@ mobile-experience@1.0.4
 mobile-status-bar@1.0.12
 modules@0.7.6
 modules-runtime@0.7.6
-mongo@1.1.11
+mongo@1.1.12
 mongo-id@1.0.5
-npm-mongo@1.5.46
+npm-mongo@1.5.49
 observe-sequence@1.0.12
 ordered-dict@1.0.8
-promise@0.8.4
+promise@0.8.7
 random@1.0.10
 rate-limit@1.0.5
 reactive-var@1.0.10
@@ -81,15 +80,15 @@ retry@1.0.8
 routepolicy@1.0.11
 service-configuration@1.0.10
 shell-server@0.2.1
-spacebars@1.0.12
-spacebars-compiler@1.0.12
+spacebars@1.0.13
+spacebars-compiler@1.0.13
 standard-minifier-css@1.2.0
 standard-minifier-js@1.2.0
-static-html@1.1.12
-templating-tools@1.0.4
+static-html@1.1.13
+templating-tools@1.0.5
 tmeasday:check-npm-versions@0.3.1
 tracker@1.1.0
-ui@1.0.11
+ui@1.0.12
 underscore@1.0.9
 url@1.0.10
 use-vue-component@0.0.1

client/main.js

@@ -1,7 +1,18 @@
 // Libs
 import {Meteor} from 'meteor/meteor';
-import {Vue} from 'meteor/akryum:vue';
+import Vue from 'vue';
 import {Router} from 'meteor/akryum:vue-router';
+import ApolloClient from 'apollo-client';
+import { meteorClientConfig } from 'meteor/apollo';
+import gql from 'graphql-tag';
+import VueApollo from 'vue-apollo';
+
+// Apollo
+const apolloClient = new ApolloClient(meteorClientConfig());
+window.gql = gql;
+Vue.use(VueApollo, {
+  apolloClient,
+});
 
 // Api
 import '/imports/api/methods';

imports/ui/AppLayout.vue

@@ -34,7 +34,7 @@ export default {
 
 <style>
 body, input {
-    font-family: sans-serif;
+    font-family: 'Roboto', sans-serif;
     font-size: 12pt;
 }
 

imports/ui/Home.vue

@@ -7,15 +7,21 @@
   img.logo(src="/img/meteor.png")
 
   p
-    button2(:label="$t('pages.home.button')", @action="clicked=true", v-if="!clicked")
+    button2(:label="$t('pages.home.button')", @action="handleClick", v-if="!clicked")
+    .counter {{ count }}
 </template>
 
 <script>
 export default {
   data: () => ({
-    clicked: false
-  })
-}
+    count: 0,
+  }),
+  methods: {
+    handleClick() {
+      this.count += 42;
+    },
+  },
+};
 </script>
 
 <style scoped lang="stylus">
@@ -27,4 +33,8 @@ export default {
   img.logo
     max-width 101px
     margin margin
+
+  .counter
+    color grey
+    margin-top 32px
 </style>

package.json

@@ -6,17 +6,19 @@
   },
   "devDependencies": {
     "apollo-client": "^0.4.4",
-    "apollo-server": "^0.1.5",
+    "apollo-server": "^0.2.1",
+    "body-parser": "^1.15.2",
     "express": "^4.13.4",
     "faker": "^3.1.0",
-    "graphql": "^0.6.1",
+    "graphql": "^0.7.0",
     "graphql-tag": "^0.1.9",
     "graphql-tools": "^0.6.0",
     "js-cookie": "^2.1.2",
     "locale": "^0.1.0",
     "vue": "^1.0.24",
     "vue-i18n": "^4.0.1",
     "vue-router": "^0.7.13",
+    "vue-apollo": "^1.0.0-beta.11",
     "vuex": "^1.0.0-rc.2"
   }
-}
+}