Akryum

// --- Base components ---
import Vue from 'vue'

// To extract the component name
const nameReg = /([a-z0-9]+)\./i

function registerGlobalComponents (components) {
  components.keys().forEach(key => {
    const name = key.match(nameReg)[1]
    Vue.component(name, {

Akryum

<template>
  <div>
    <button @click="inspect">Inspect me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    inspect () {

Akryum

const sendThisToDevtools = {
  _custom: {
    type: 'set',
    display: 'Set[3]',
    readOnly: true,
    value: [1, 2, {
      _custom: {
        type: 'map',
        display: 'Map[3]',
        value: { a: 42, b: 'foo' }

Akryum

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

Akryum

Syntax: Marko vs Vue

Custom tags and passing data

Marko:

<greeting
  name=fullName
 message-count=30

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

<template>
  <div>
    <div v-if="$responsive.mobile">Mobile</div>
    <div v-else-if="$responsive.tablet">Tablet</div>
    <div v-else>Desktop</div>
  </div>
</template>

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

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

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