Nuxt Shopify

<script setup lang="ts">
const props = defineProps<{
  handle: string
}>()

const { data } = await useStorefrontData('product', `#graphql
  query GetProduct($handle: String!) {
    product(handle: $handle) {
      featuredImage {
        url
      }
    }
  }
`, {
  variables: props,
})
</script>

<template>
  <NuxtImg :src="data?.product?.featuredImage?.url" />
</template>

<script setup lang="ts">
const { isLoggedIn } = useUserSession()

if (!isLoggedIn.value) {
  navigateTo('/_auth/customer-account/callback')
}

const { data } = await useCustomerAccountData(`#graphql
  query GetCustomer {
    customer {
      firstName
      lastName
    }
  }
`, {
  transform: data => data?.customer,
})
</script>

<template>
  <div v-if="data">
    <h1>
      Welcome, {{ data.firstName }} {{ data.lastName }}!
    </h1>

    <UButton
      to="/account/orders"
      icon="i-lucide-package-2"
    >
      View Orders
    </UButton>

    <UButton
      to="/account/settings/address"
      variant="soft"
      icon="i-lucide-map-pin-house"
    >
      Edit Address
    </UButton>

    <UButton 
      to="/_auth/customer-account/logout" 
      variant="outline" 
      icon="i-lucide-log-out"
    >
      Log out
    </UButton>
  </div>
</template>

export default defineEventHandler(async () => {
  const admin = useAdmin()

  const { data } = await admin.request(`#graphql
    query GetMarkets {
      markets(first: 4) {
        nodes {
          ...MarketFields
        }
      }
    }
    ${MARKET_FRAGMENT}
  `)

  return flattenConnection(data?.markets)
})