Akryum

<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">

<polymer-element name="my-element">

  <template>

Akryum

import Vue from 'vue';
import App from './App.vue';
import ApolloClient, { createNetworkInterface, addTypename } from 'apollo-client';
import VueApollo from 'vue-apollo';

// Create the apollo client
const apolloClient = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: 'http://localhost:8080/graphql',
    transportBatching: true,

Akryum

  apollo: {
    posts: {
      query: postsQuery,
      loadingKey: 'loading',
      // Polling query
      pollInterval: 300, // ms
    },
  },

Akryum

<script>
export default {
  created() {
    this.$apollo.watchQuery({
      /* options */
    }).then(data => {
      console.log(data);
    });
  },
};

Akryum

  // Local state
  data: () => ({
    // You can initialize the 'posts' data here
    posts: [],
    loading: 0,
  }),

Akryum

import { PubSub, SubscriptionManager } from 'graphql-subscriptions';
import schema from './schema';

const pubsub = new PubSub();
const subscriptionManager = new SubscriptionManager({
  schema,
  pubsub,
  setupFunctions: {
    tagAdded: (options, args) => {
      console.log(args);

Akryum

const field = this._leaving ? 'leave' : 'enter'
const lastField = '_lastDuration_' + field
const duration = this.duration
const explicitDuration = parseDuration((
  duration !== null &&
  typeof duration === 'object' &&
  duration[field]
) || duration)

const el = child.elm

Akryum

<meta name="theme-color" content="#00aaff"/>
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#00aaff"/>
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

Akryum

Syntax: Marko vs Vue

Custom tags and passing data

Marko:

<greeting
  name=fullName
 message-count=30

Akryum

Vue.component('SomeData', {
  apollo: {
    items: ITEMS_QUERY,
  },
  template: `
  <div>
    <slot :items="items"/>
  </div>
  `,
})