NUXT_FRONTEND/pages/video/index.vue

<template>
  <section class="video section">
    <div class="video__wrapper section-wrapper">
      <template v-if="videos.length">
        <VideoSliderTop
          :list="sliderTopVideos"
          class="video-top"
        ></VideoSliderTop>

        <VideoList :videoCategory="videos[0]" class="video-list"></VideoList>

        <VideoSliderCenter
          :videoCategory="videos[1]"
          class="video-center"
        ></VideoSliderCenter>

        <VideoList
          v-for="video in videos.slice(2)"
          :key="video.id"
          :videoCategory="video"
          class="video-list"
        ></VideoList>

        <BannersW1254H100Or90 class="video-banner" />
      </template>
    </div>
  </section>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  colorMode: "dark",

  data: () => ({
    videos: [],
  }),

  async asyncData({ store }) {
    await store.dispatch("modules/news/setCategoriesList");
  },

  async mounted() {
    const promises = this.categories.map(this.loadVideos);
    this.videos = await Promise.all(promises);
  },

  methods: {
    loadVideos(category) {
      return this.$axios
        .get(`/news/category/${category.alias}`)
        .then((res) => res.data.data);
    },
  },

  computed: {
    ...mapGetters({
      allCategories: "modules/news/categoriesList",
    }),

    categories() {
      return this.allCategories.data.find((cat) => cat.alias === "video").child;
    },

    //First three categories actual video
    sliderTopVideos() {
      if (!this.videos.length) return [];

      return this.videos
        .slice(0, 3)
        .map((video) => video.news[0])
        .filter((video) => video);
    },
  },

  head() {
    return {
      title: "Амик.Видео",
      meta: [
        {
          name: "description",
          content: "Видео-новости на Амик.ру — новости Барнаула и Алтайского края: интервью, репортажи",
        },
        {
          name: "keys",
          content: "Амик, видео, новости барнаула",
        },
      ],
      link: [
        {rel: 'canonical', href: 'https://www.amic.ru/video'}
      ]
    };
  },
};
</script>

<style lang="less" scoped>
.video {
  padding-bottom: 50px;
  color: white;

  &-top {
    margin-bottom: 50px;
  }

  &-center {
    margin-top: 50px;
  }

  &-list {
    margin-bottom: 25px;
  }

  &-banner {
    margin-top: 50px;
  }
}
</style>