NUXT_FRONTEND/pages/podcasts/index.vue

<template>
    <section class="video section">
        <div class="video__wrapper section-wrapper podcasts-wrapper">
            <h1 class="podcast-h1">Слушай</h1>
            <template v-if="podcasts.length">
                <PodcastList
                    v-if="podcasts.length > 0"
                    v-for="podcast in podcasts"
                    :podcast="podcast">
                </PodcastList>
            </template>
        </div>
    </section>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data: () => ({
    podcasts: [],
  }),
  computed: {
    ...mapGetters({
      allCategories: "modules/news/categoriesList",
    }),
    categories() {
      return this.allCategories.data.find((cat) => cat.alias === "slushay").child;
    },
  },
  props: {
      category: {
          type: Object
      }
  },
  methods: {
    loadPodcasts(category) {
      return this.$axios
        .get(`/news/category/${category.alias}`)
        .then((res) => res.data.data);
    },
  },
  async mounted() {
    const promises = this.categories.map(this.loadPodcasts);
    this.podcasts = await Promise.all(promises);
    console.log(this.podcasts.length);
  },
  head() {
    return {
      title: 'Амик - Подкасты',
        meta: [
            {
              name: "description",
              content: "",
            },
            {
              name: "keys",
              content: "",
            },
        ],
        link: [
            {rel: 'canonical', href: 'https://www.amic.ru/podcasts'}
        ]
    };
  },
  async asyncData({store}) {
      await store.dispatch("modules/ads/getAds");
      await store.dispatch("modules/news/setCategoriesList");
  }

};
</script>

<style>
    .podcast-h1{
        margin-bottom: 30px;
    }
</style>