Index.vue

<template>
  <q-page>
    <Hero />
    <div
      v-if="loaded"
      class="row q-pa-sm"
    >
      <div class="col-lg-8 offset-lg-2 col-md-12 col-sm-12">
        <section id="featured">
          <FeaturedGallery :items="popularProjects" />
        </section>
        <section id="banner">
          <UploadBanner />
        </section>
        <section id="recent">
          <RecentGallery :items="latestProjects" />
        </section>

        <section id="collections">
          <CollectionsGallery />
        </section>
        <section id="banner2">
          <BannerFabricademy />
        </section>
      </div>
    </div>
  </q-page>
</template>

<style>
section {
  margin-top: 64px;
  margin-bottom: 128px;
  /* margin-left: 32px;
  margin-right: 32px; */
}
</style>

<script>
import Hero from '../components/homepage/Hero'
import CollectionsGallery from '../components/collection/CollectionsGallery'
import FeaturedGallery from '../components/homepage/FeaturedGallery'
import RecentGallery from '../components/homepage/RecentGallery'
import UploadBanner from '../components/homepage/UploadBanner'
import BannerFabricademy from '../components/homepage/BannerFabricademy'

// eslint-disable-next-line standard/object-curly-even-spacing
import { mapGetters/*, mapActions */ } from 'vuex'

export default {
  name: 'PageIndex',
  components: {
    Hero,
    FeaturedGallery,
    RecentGallery,
    UploadBanner,
    CollectionsGallery,
    BannerFabricademy
  },
  data () {
    return {
      loaded: false
    }
  },
  computed: {
    ...mapGetters({
      latestCollections: 'collections/latestCollections',
      latestProjects: 'projects/latestProjects',
      popularProjects: 'projects/popularProjects'
    })
  },
  mounted () {
    this.loadProjects()
  },
  methods: {
    loadProjects () {
      this.loaded = false
      this.$q.loadingBar.start()
      Promise.all([
        this.$store.dispatch('projects/loadPopularProjects'),
        this.$store.dispatch('projects/loadLatestProjects'),
        this.$store.dispatch('collections/loadLatestCollections')
      ]).finally(() => {
        this.loaded = true
        this.$q.loadingBar.stop()
      })
    }
  }
}
</script>