NUXT_FRONTEND/pages/video/_category/_alias.vue

<template>
  <VideoArticle :videoItem="videoItem" :filteredVideos="filteredVideos" />
</template>

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

export default {
  colorMode: "dark",

  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({
      videoItem: "modules/news/newsItem",
      videos: "modules/news/categoryNewsList"
    }),

    filteredVideos() {
      return this.videos.news
        .filter(video => video.id != this.videoItem.id)
        .slice(0, 3);
    },

    videoLink() {
      if (this.videoItem.video.match("(www.)?youtube|youtu.be")) {
        const youtubeId = this.videoItem.video
          .split(/v\/|v=|youtu\.be\//)[1]
          .split(/[?&]/)[0];
        return `https://www.youtube.com/embed/${youtubeId}`;
      }

      return this.videoItem.video;
    }
  },

  head() {
    return {
      title: this.videoItem.title,
      meta: [
        {
          name: "copyright",
          content: "ИА Амител",
        },
        {
          name: "publisher",
          content: "https://g.page/amitel?gm",
        },
        {
          name: "description",
          content: this.videoItem.description ? this.videoItem.description : '',
        },
        {
          name: "keys",
          content: this.videoItem.meta.key ? this.videoItem.meta.key : '',
        },
        {
          name: "author",
          content: this.videoItem.show_author ? this.videoItem.author ? this.videoItem.author.name : "ИА Амител" : "ИА Амител",
        },
        {
          name: "mediator_author",
          content: "ИА Амител",
        },
        {
          hid: "twitter:title",
          name: "twitter:title",
          content: this.videoItem.title
        },
        {
          hid: "twitter:description",
          name: "twitter:description",
          content: this.videoItem.description
        },
        {
          hid: "twitter:image",
          name: "twitter:image",
          content: this.videoItem.image ? this.videoItem.image.url : ""
        },
        {
          hid: "twitter:image:alt",
          name: "twitter:image:alt",
          content: this.videoItem.image ? this.videoItem.image.title : ""
        },
        {
          hid: "og:title",
          property: "og:title",
          content: this.videoItem.title
        },
        {
          hid: "og:description",
          property: "og:description",
          content: this.videoItem.description
        },
        {
          hid: "og:image",
          property: "og:image",
          content: this.videoItem.image ? this.videoItem.image.url : ""
        },
        {
          hid: "og:image:secure_url",
          property: "og:image:secure_url",
          content: this.videoItem.image ? this.videoItem.image.url : ""
        },
        {
          hid: "og:image:alt",
          property: "og:image:alt",
          content: this.videoItem.image ? this.videoItem.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.videoItem.category ? 'https://www.amic.ru/video/' + this.videoItem.category.alias + '/' + this.videoItem.alias : ''}
      ],
    };
  }
};
</script>

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