NUXT_FRONTEND/pages/video/_category/index.vue

<template>
  <section class="video-category section">
    <div class="video-category__wrapper section-wrapper">
      <div class="video-category-title">{{ videos.category.name }}</div>

      <div class="video-category-loader" v-if="!videos.news">
        <v-progress-circular indeterminate></v-progress-circular>
      </div>

      <div class="video-category-list" v-else>
        <VideoItem
          class="video-category-item"
          v-for="video in videos.news"
          :key="video.id"
          :item="video"
        ></VideoItem>
      </div>
      
      <div class="video-category-pagination">
        <Pagination
          :length="videos.total_pages"
          v-if="videos.news"
          :visible="10"
          v-model="pagination"
          dark
          @input="changePage"
        ></Pagination>
      </div>
    </div>
  </section>
</template>

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

export default {
  colorMode: "dark",

  watchQuery: ["pagination"],

  created() {
    this.pagination = Number(this.$route.query.pagination) || 1;
  },

  async fetch({ store, route }) {
    await store.dispatch("modules/news/setCategoryNewsList", {
      category: route.params.category,
      pagination: route.query.pagination || 1,
    });
  },

  methods: {
    async changePage() {
      window.scrollTo({ top: 0, behavior: "smooth" });

      this.$router.push({
        name: this.$route.name,
        query: { pagination: this.pagination }
      })
    }
  },

  computed: {
    ...mapGetters({
      videos: "modules/news/categoryNewsList",
    }),
  },

  head() {
    return {
      title: "Амик - " + this.videos.category.name,
      meta: [
        {
          name: "description",
          content: this.videos.category.meta.description,
        },
        {
          name: "keys",
          content: this.videos.category.meta.key,
        },
      ],
      link: [
        {rel: 'canonical', href: this.videos.category ? 'https://www.amic.ru/video/' + this.videos.category.alias : ''}
      ]
    };
  },
};
</script>

<style lang="less" scoped>
.video-category {
  padding-top: 30px;
  color: white;

  &-title {
    font-size: 30px;
    color: white;
    margin-bottom: 20px;
  }

  &-loader {
    text-align: center;
  }

  &-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;

    @media screen and(max-width: 1300px) {
      justify-content: space-around;
    }
  }

  &-pagination {
    padding: 20px 0;
  }

  &-item {
    flex: 100%;
    max-width: 417px;
    margin: 10px;
  }
}
</style>