app/layouts/default.vue

<template>
  <div>
    <!-- Show the loading page -->
    <client-only placeholder-tag="client-only-placeholder" placeholder=" " />

    <v-app>
      <LayoutLoadingScreen />

      <LayoutDialogRefreshNeeded />

      <LayoutHeader />

      <LayoutMainMenu>
        <template #prepend="{ isRail }">
          <LayoutUpgradePremiumButton
            v-if="showUpgradePremiumButton"
            :minimized="isRail"
          />
        </template>
      </LayoutMainMenu>

      <v-main class="main">
        <LayoutSubheader />

        <LayoutAlertBar />

        <!-- Page will be rendered here-->
        <slot />
      </v-main>

      <LazyLayoutAlertContainer />
    </v-app>
  </div>
</template>

<script setup lang="ts">
import { computed, type ComputedRef } from 'vue'
import { useLayoutStore } from '~/stores/layout'
import { useAccessProfileStore } from '~/stores/accessProfile'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'

const layoutStore = useLayoutStore()
layoutStore.name = 'default'

const accessProfile = useAccessProfileStore()
const organizationProfile = useOrganizationProfileStore()

const showUpgradePremiumButton: ComputedRef<boolean> = computed(
  () =>
    ((organizationProfile.isArtistProduct ||
      organizationProfile.isTrialActive) &&
      (accessProfile.isCaMember || accessProfile.isAdmin)) ??
    false,
)
</script>