NUXT_FRONTEND/pages/podcasts/_category/index.vue

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

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

      <div class="video-category-list" v-else>
        <PodcastItem
              class="video-category-item"
              v-for="podcast in podcasts.news"
              :key="podcast.id"
              :item="podcast"
        ></PodcastItem>
      </div>

      <div class="video-category-pagination">
        <Pagination
                :length="podcasts.total_pages"
                v-if="podcasts.news"
                :visible="10"
                v-model="pagination"
                white
                @input="changePage"
        ></Pagination>
      </div>
    </div>
  </section>
</template>

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

  export default {
    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({
        podcasts: "modules/news/categoryNewsList",
      }),
    },

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

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

    &-title {
      font-size: 30px;
      color: #000;
      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>