NUXT_FRONTEND/pages/videos/_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() {
    console.log(this.newsItem)

  },
  async fetch({ store, route }) {
    await store.dispatch("modules/news/setNewsItem", {
      category: 'video',
      alias: route.params.alias
    });
  },
  head() {
    return {
      title: this.newsItem.title,
      meta: [
        {
          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
        }
      ],
    };
  },
};
</script>

<style lang="less">
.detail-top__header {
  margin-bottom: 50px;
}
@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>