ArtistCard.vue

<template>
  <div class="ui card">
    <div class="content">
      <div v-if="isLoading" class="ui vertical segment">
        <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
      </div>
      <template v-if="data.id">
        <header class="header">
          <a :href="getMusicbrainzUrl('artist', data.id)" target="_blank" :title="labels.musicbrainz">{{ data.name }}</a>
        </header>
        <div class="description">
          <table class="ui very basic fixed single line compact table">
            <tbody>
              <tr v-for="group in releasesGroups">
                <td>
                  {{ group['first-release-date'] }}
                </td>
                <td colspan="3">
                  <a :href="getMusicbrainzUrl('release-group', group.id)" class="discrete link" target="_blank" :title="labels.musicbrainz">
                    {{ group.title }}
                  </a>
                </td>
                  <td>
                  </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Vue from "vue"
import CardMixin from "./CardMixin"
import time from "@/utils/time"

export default Vue.extend({
  mixins: [CardMixin],
  data() {
    return {
      time
    }
  },
  computed: {
    labels() {
      return {
        musicbrainz: this.$pgettext('Content/*/Link.Tooltip/Verb', "View on MusicBrainz")
      }
    },
    type() {
      return "artist"
    },
    releasesGroups() {
      return this.data["release-group-list"].filter(r => {
        return r.type === "Album"
      })
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.ui.card {
  width: 100% !important;
}
</style>