start with nuxt

components/Home.vue

@@ -0,0 +1,100 @@
+<template lang="pug">
+  div
+    magic-grid(:animate="false" useMin :gap=5 :maxCols=4
+      :maxColWidth='400' ref='magicgrid')
+      div.mt-1.item
+        //- Search#search
+        no-ssr
+          Calendar
+    Event.item.mt-1(v-for='event in events'
+      :key='event.id'
+      :event='event')
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import axios from 'axios'
+// import filters from '@/filters.js'
+import Event from '@/components/Event'
+import Calendar from '@/components/Calendar'
+// import { intersection } from 'lodash'
+// import moment from 'dayjs'
+// import Search from '@/components/Search'
+
+export default {
+  name: 'Home',
+  // async asyncData ({req}) {
+  //   console.log('dentro asyncData')
+  //   const { data } = await axios.get('http://localhost:3000/api/event/2019/2')
+  //   return { events: data }
+  // },
+  components: { Event, Calendar }, // , Calendar, Search },
+  computed: {
+    ...mapState(['events', 'filters']),
+    filteredEvents() {
+      return this.events
+      // return this.$store.getters.filteredEvents
+        .filter(e => !e.past)
+        .sort((a, b) => a.start_datetime > b.start_datetime)
+    }
+  },
+  watch: {
+    filteredEvents() {
+      // this.$nextTick(this.$refs.magicgrid.positionItems) TOFIX
+    }
+  }
+}
+</script>
+<style>
+#search {
+  display: inline-flex;
+}
+
+.item {
+  width: 100%;
+  max-width: 400px;
+  margin-top: 4px;
+  position: absolute;
+  cursor: pointer;
+}
+
+.card-columns {
+  column-count: 1;
+  column-gap: 0.2em;
+}
+@media (min-width: 576px) {
+  .container {
+    max-width: none;
+  }
+  .card-columns {
+    column-count: 2;
+  }
+}
+
+@media (min-width: 950px) {
+  .container {
+    max-width: 1400px;
+  }
+  .card-columns {
+    column-count: 3;
+  }
+}
+
+/* .item {
+  transition: all .2s;
+  display: inline-block;
+  width: 100%;
+} */
+/* .list-enter, .list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+.list-leave-active {
+  position: absolute;
+  top: 0px;
+  width: 0px;
+  left: 0px;
+  height: 0px;
+  z-index: -10;
+} */
+</style>