app_vue2/components/Ui/Card.vue

<template>
  <v-card
    elevation="2"
    outlined
    shaped
    min-height="200"
  >
    <v-card-title>
      <slot name="card.title" />
    </v-card-title>
    <v-card-text>
      <slot name="card.text" />
    </v-card-text>
    <v-card-actions>
      <v-spacer />
      <v-btn icon>
        <NuxtLink :to="link" class="no-decoration">
          <v-icon>mdi-pencil</v-icon>
        </NuxtLink>
      </v-btn>
      <UiButtonDelete :delete-args="args" />
      <slot name="card.action" />
    </v-card-actions>
  </v-card>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import { QUERY_TYPE } from '~/types/enums'
import { DataDeleterArgs } from '~/types/interfaces'

export default defineComponent({
  props: {
    link: {
      type: String,
      required: true
    },
    model: {
      type: Function,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  },
  setup (props) {
    const args: DataDeleterArgs = {
      type: QUERY_TYPE.MODEL,
      model: props.model,
      id: props.id
    }
    return {
      args
    }
  }
})
</script>

<style scoped>
</style>