NUXT_FRONTEND/components/News/Item.vue

<template>
  <li class="catalog-list__item">
    <div class="catalog-item">
      <a class="catalog-item__link" href="javascript:void(0)">
        <aside class="catalog-item__side">
          <div class="catalog-item__figure">
            <img class="catalog-item__img" :src="news.urlToImage ? news.urlToImage : ''" alt="" />
          </div>
        </aside>
        <main class="catalog-item__main">
          <div class="catalog-item__main-top">
            <div class="catalog-item__main-title">
              <img v-if="categoryNews.lightning" :src="require('~/static/svg/styled/lightning.svg')" />
              <span v-html="news.title"></span>
            </div>
          </div>
          <div class="catalog-item__main-bottom">
            <div class="catalog-item__main-info">
              <div class="catalog-item__main-info-element">
                <span>{{ $convertDate(news.publishedAt) }}</span>
              </div>
              <div class="catalog-item__main-info-element">
                <span> <BaseIcon :name="'views'" /></span><span>235</span>
              </div>
              <div class="catalog-item__main-info-element">
                <span> <BaseIcon :name="'comments'" clear/></span><span>57</span>
              </div>
            </div>
          </div>
        </main></a
      >
    </div>
  </li>
</template>

<script>
export default {
  props: {
    news: {
      type: Object,
      required: true,
    },
  },
  methods: {

  }
};
</script>

<style>
</style>