plaid/src/pages/Radio.vue

<template>
  <f7-page name="radio">
    <img :src="Radio.logo" id="logo" />
    <f7-block-title>{{ Radio.name }}</f7-block-title>
    <f7-block-header>{{ Radio.description }}</f7-block-header>

    <div v-if="loading" strong class="text-align-center">
      <f7-preloader v-if="loading" />
    </div>
    <f7-list v-else>
      <f7-list-item title="Diretta" :link="`/radio/${encodeURIComponent(radioUrl)}/live`" />
      <f7-list-item title="Trasmissioni" :link="`/radio/${encodeURIComponent(radioUrl)}/shows`" />
      <f7-list-item
        title="Contatti"
        :link="`/radio/${encodeURIComponent(radioUrl)}/contacts`"
        disabled
      />
    </f7-list>
  </f7-page>
</template>

<script>
import radiomanifest from "../js/radiomanifest";

export default {
  name: "radio",
  data() {
    return {
      loading: true,
      radioUrl: null,
      radio: { name: "" },
      Radio: {},
    };
  },
  props: { f7route: Object, f7router: Object },
  async mounted() {
    this.radioUrl = decodeURIComponent(this.f7route.params.radioUrl);
    try {
      this.Radio = await radiomanifest.get(this.radioUrl);
      this.loading = false;
    } catch (e) {
      console.error("le cose non vanno mai sempre bene!", e);
    }
  },
};
</script>
<style>
#logo {
  margin-left: 10px;
  max-width: 40px;
}
</style>