NUXT_FRONTEND/pages/articles/_alias.vue

<template>
  <div>
    <Article :news="newsItem" />

  </div>
</template>

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

export default {
  data() {
    return {
      adsList: [],
      count: 0
    }
  },
  computed: {
    ...mapGetters({
      newsItem: "modules/news/newsItem",

    }),
     status() {
      if (!this.ads) {
        return false;
      } else {
        return true;
      }
    },
  },
  mounted() {},
  async fetch({ store, route, error }) {
    await store.dispatch("modules/news/setNewsItem", {
      category: 'articles',
      alias: route.params.alias
    });
    const newsItem = store.getters['modules/news/newsItem'];
    if(!newsItem){
      error({ statusCode: 404 })
    }
  },
  head() {
    return {
      title: this.newsItem.title,
      meta: [
        {
          name: "copyright",
          content: "ИА Амител",
        },
        {
          name: "publisher",
          content: "https://g.page/amitel?gm",
        },
        {
          name: "author",
          content: this.newsItem.show_author ? this.newsItem.author ? this.newsItem.author.name : 'ИА Амител' : "ИА Амител",
        },
        {
          name: "mediator_author",
          content: "ИА Амител",
        },
        {
          name: "description",
          content: this.newsItem.description
        },
        {
          name: "keys",
          content:
            this.newsItem.meta.key
        },
        {
          hid: 'twitter:title',
          name: 'twitter:title',
          content: this.newsItem.title
        },
        {
          hid: 'twitter:description',
          name: 'twitter:description',
          content: this.newsItem.description
        },
        // {
        //   hid: 'twitter:image',
        //   name: 'twitter:image',
        //   content: this.newsItem.image.url
        // },
        {
          hid: 'twitter:image:alt',
          name: 'twitter:image:alt',
          content: this.newsItem.title
        },
        {
          hid: 'og:title',
          property: 'og:title',
          content: this.newsItem.title
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: this.newsItem.description
        },
        // {
        //   hid: 'og:image',
        //   property: 'og:image',
        //   content: this.newsItem.image.url
        // },
        // {
        //   hid: 'og:image:secure_url',
        //   property: 'og:image:secure_url',
        //   content: this.newsItem.image.url
        // },
        {
          hid: 'og:image:alt',
          property: 'og:image:alt',
          content: this.newsItem.title
        }
      ],
      link_id: [
        {rel: 'canonical', href: this.newsItem.category ? 'https://www.amic.ru/articles/' + this.newsItem.alias : ''}
      ],
    };
  },
};
</script>

<style lang="less">
.detail-top__header {
  margin-bottom: 0;
}
@media screen and (max-width: 900px) {
  .detail {
    &__wrapper {
      flex-direction: column-reverse;
    }
    &__side {
      margin-bottom: 20px;
      display: none;
    }
  }
  .detail-top {
    &__header {
      display: block;
    }
    &__footer {
      display: block;
    }
    &__footer-side {
      display: flex;
      margin-top: 20px;
    }
  }
  .detail-article-news__wrapper {
    display: block;
  }
}
.detail-article-news__side {
  display: flex;
align-items: center;
}
</style>