NUXT_FRONTEND/pages/podcasts/_category/_alias.vue

<template>
  <PodcastArticle :podcastItem="podcastItem" :filteredPodcasts="filteredPodcasts" />
</template>

<script>
  import { mapGetters } from "vuex";
  export default {
    async fetch({ store, route, error }) {
      await store.dispatch("modules/news/setNewsItem", route.params);
      await store.dispatch("modules/news/setCategoryNewsList", {
        category: route.params.category,
        page: 1
      });
      const newsItem = store.getters['modules/news/newsItem'];
      if(!newsItem){
        error({ statusCode: 404 })
      }
    },

    async asyncData({ req, route }) {
      const host = req ? req.headers.host : window.location.origin;
      const url = host + route.path;
      return { url };
    },

    computed: {
      ...mapGetters({
        podcastItem: "modules/news/newsItem",
        podcasts: "modules/news/categoryNewsList"
      }),

      filteredPodcasts() {
        return this.podcasts.news
          .filter(podcast => podcast.id != this.podcastItem.id)
          .slice(0, 3);
      },
    },

    head() {
      return {
        title: this.podcastItem.title,
        meta: [
          {
            name: "copyright",
            content: "ИА Амител",
          },
          {
            name: "publisher",
            content: "https://g.page/amitel?gm",
          },
          {
            name: "description",
            content: this.podcastItem.description ? this.podcastItem.description : '',
          },
          {
            name: "keys",
            content: this.podcastItem.meta.key ? this.podcastItem.meta.key : '',
          },
          {
            hid: "twitter:title",
            name: "twitter:title",
            content: this.podcastItem.title
          },
          {
            name: "author",
            content: this.podcastItem.show_author ? this.podcastItem.author ? this.podcastItem.author.name : 'ИА Амител' : "ИА Амител",
          },
          {
            name: "mediator_author",
            content: "ИА Амител",
          },
          {
            hid: "twitter:description",
            name: "twitter:description",
            content: this.podcastItem.description
          },
          {
            hid: "twitter:image",
            name: "twitter:image",
            content: this.podcastItem.image ? this.podcastItem.image.url : ""
          },
          {
            hid: "twitter:image:alt",
            name: "twitter:image:alt",
            content: this.podcastItem.image ? this.podcastItem.image.title : ""
          },
          {
            hid: "og:title",
            property: "og:title",
            content: this.podcastItem.title
          },
          {
            hid: "og:description",
            property: "og:description",
            content: this.podcastItem.description
          },
          {
            hid: "og:image",
            property: "og:image",
            content: this.podcastItem.image ? this.podcastItem.image.url : ""
          },
          {
            hid: "og:image:secure_url",
            property: "og:image:secure_url",
            content: this.podcastItem.image ? this.podcastItem.image.url : ""
          },
          {
            hid: "og:image:alt",
            property: "og:image:alt",
            content: this.podcastItem.image ? this.podcastItem.image.title : ""
          },
          {
            hid: "og:type",
            property: "og:type",
            content: "website"
          },
          {
            hid: "og:site_name",
            property: "og:site_name",
            content: "amic"
          },
          {
            hid: "og:url",
            property: "og:url",
            content: this.url
          },
          {
            hid: "fb:app_id",
            property: "fb:app_id",
            content: "4369125136471767"
          }
        ],
        link: [
          {rel: 'canonical', href: this.podcastItem.category ? 'https://www.amic.ru/podcasts/' + this.podcastItem.category.alias + '/' + this.podcastItem.alias : ''}
        ],
      };
    }
  };
</script>

<style lang="less" scoped>
</style>