app/layouts/default.vue

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

    <v-app>
      <LayoutLoadingScreen />

      <LayoutHeader />

      <LayoutMainMenu>
        <template #prepend>
          <LayoutUpgradePremiumButton
            :show="showUpgradePremiumButton"
          />
        </template>
      </LayoutMainMenu>

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

        <LayoutAlertBar class="mt-1" />

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

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

<script setup lang="ts">
import { useLayoutStore } from '~/stores/layout'

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>