materio-d9/web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue

<template>
  <article class="card article">
    <header>
      <h1>
        <a
          :href="item.view_node"
          @click.prevent="onclick"
          v-html="item.title"
        ></a>
      </h1>
      <aside v-html="item.created"></aside>
      <!-- <h4 class="body" v-html="item.body"></h4> -->
    </header>
    <section class="images">
      <a
        :href="item.view_node"
        @click.prevent="onclick"
      >
        <figure v-html="item.field_visuel"/>
      </a>
    </section>
  </article>
</template>

<script>
// import { JSONAPI } from 'vuejs/api/json-axios'
import router from 'vuejs/route'

let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;

export default {
  name: "ArticleCard",
  router,
  props: ['item'],
  data(){
    return {
      alias: this.item.view_node.replace(/^.*\/blabla\//g, '')
    }
  },
  methods:{
    onclick(){
      console.log('clicked on article', this.alias);
      this.$router.push({
        name:`article`,
        params: { alias:this.alias, id: this.item.nid }
        // query: { nid: this.item.nid }
        // meta: { uuid:this.item.uuid },
      })
    }
  }
}
</script>

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