seepur/resources/scripts/applications/home/views/home.vue

<template>
  <div class="wrapper">
    <nav class="level">
      <div class="level-left">
        <div class="level-item">
          <p class="subtitle">
            <i class="fa fa-users"></i>&nbsp;My Connections
          </p>
        </div>
      </div>
      <div class="level-right">
        <!-- <div class="level-item">
          <a href="#" class="button is-success">
            <i class="fa fa-plus"></i>&nbsp;Add a new Child
          </a>
        </div>-->
        <div class="level-item">
          <a href="#" class="button is-primary">
            <i class="fa fa-plug"></i>&nbsp;Connect to a child
          </a>
        </div>
      </div>
    </nav>
    <div class="card">
      <div class="card-content">
        <div class="columns">
          <div class="column" v-for="connection in connections">
            <ChildAvatar :child="connection" />
          </div>
          <!-- <div class="column">
            <ChildAvatar />
          </div>
          <div class="column">
            <ChildAvatar />
          </div>
          <div class="column">
            <ChildAvatar />
          </div>
          <div class="column">
            <ChildAvatar />
          </div>-->
        </div>
      </div>
      <!-- <footer class="card-footer">
        <p class="card-footer-item">

        </p>
        <p class="card-footer-item">
          <span>
            Connect to a chiled
            <a href="#">Facebook</a>
          </span>
        </p>
      </footer>-->
    </div>
  </div>
</template>

<script lang="ts">
import ChildAvatar, { IChildAvatar } from "../components/child_avatar.vue";
const connections: IChildAvatar[] = [
  {
    avatarUrl:
      "http://icons.iconarchive.com/icons/google/noto-emoji-people-face/1024/10122-baby-icon.png",
    name: "Ayala Dayan"
  },
  {
    avatarUrl:
      "http://icons.iconarchive.com/icons/google/noto-emoji-people-face/1024/10125-baby-medium-skin-tone-icon.png",
    name: "Sagi Dayan"
  },
  {
    avatarUrl:
      "http://icons.iconarchive.com/icons/google/noto-emoji-people-face/1024/10142-girl-medium-light-skin-tone-icon.png",
    name: "Tamar Choen"
  }
];

export default {
  name: "Home",
  components: {
    ChildAvatar
  },
  beforeCreate() {},
  created() {},
  data() {
    return {
      connections
    };
  }
};
</script>