PierBover

type Fruit {
  id: ID!
  name: String!
}

PierBover

type Query {
  singleFruit(id: ID!): Fruit
  allFruits: [Fruit]
}

PierBover

input CreateFruitInput {
	name: String!
}

type Mutation {
	createFruit(input: CreateFruitInput!): Fruit
}

PierBover

var store = {
  counter: 0,
  addOne () {
    this.counter ++;
  }
};

var componentA = new Vue({
  data: {
    counter: store.counter

PierBover

var persistentStore = {
  state: JSON.parse(localStorage.getItem('persistent-state')),
  save () {
    localStorage.setItem('persistent-state', JSON.stringify(this.state));
  }
};

PierBover

<div id="fruits">
  <ul>
    <li v-for="fruit in fruits">{{fruit}}</li>
  </ul>
</div>

<script>
  var component = new Vue({
    el: '#fruits',
    data: {

PierBover

var component = new Vue({
  el: '#fruits',
  template: '#fruits-template',
  data: {
    fruits: ['Apple', 'Mango', 'Banana']
  }
});

PierBover

var element = document.getElementById('fruits-template');
element.parentNode.removeChild(element);
var template = element.innerHTML;

var component = new Vue({
  el: '#fruits',
  template: template,
  data: {
    fruits: ['Apple', 'Mango', 'Banana']
  }

PierBover

{% include components/fruit.html %}

PierBover

<div id="fruit-template" class="vue-template">
  <div class="fruit">
    <h3>{{fruitName}}</h3>
  </div>
</div>

<script>
  Vue.component('my-fruit', {
    template: '#fruit-template',
    props: ['fruit-name']