async fetchProductBySlug(params: { is_server_side: boolean, slug: string, set_active?: true }): Promise<NuxtProduct> {
      const variables = {
        slug: `/products/${params.slug}/`,
      }

      let response: any
      if (params.is_server_side) {
        response = await useAsyncQuery({
          query: getProductBySlugQuery,
          variables: variables,
        })

      } else {
        response = await useApolloClient().client.query({
          query: getProductBySlugQuery,
          variables: variables,
        })
      }

      const data = params.is_server_side ? response.data.value : response.data
      const product = bigCommerceToNuxtProduct(data.site.route.node)
      this.addProduct(product)
      if (params.set_active) {
        this.setActiveProduct(product)
      }
      return product
    },

    async fetchProductBySlug(params: { is_server_side: boolean, slug: string, set_active?: true }): Promise<NuxtProduct> {
      const variables = {
        slug: `/products/${params.slug}/`,
      }

      let response: any
      if (params.is_server_side) {
        response = await useAsyncQuery({
          query: getProductBySlugQuery,
          variables: variables,
        })

      } else {
        response = await useApolloClient().client.query({
          query: getProductBySlugQuery,
          variables: variables,
        })
      }

      const data = params.is_server_side ? response.data.value : response.data
      const product = bigCommerceToNuxtProduct(data.site.route.node)
      this.addProduct(product)
      if (params.set_active) {
        this.setActiveProduct(product)
      }
      return product
    },

<template>
  <product-view :product="product"/>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { isEmpty } from 'lodash'
import { useCatalogStore } from '@/pinia/CatalogStore'

const route = useRoute()
const product: any = useState()
const productSlug: ComputedRef<string> = computed(() => {
  return route.params.product_slug as string
})
const CatalogStore = useCatalogStore()

const setProductData = async(isServerSide: boolean = false) => {
  if (productSlug.value) {
    product.value = await CatalogStore.fetchProductBySlug({
      is_server_side: isServerSide,
      slug: productSlug.value
    })
  }
}

onMounted(async() => {
  if (isEmpty(product.value)) {
    await setProductData()
  }
})

onServerPrefetch(async() => {
  await setProductData(true)
})

watch(productSlug.value, async () => {
  await setProductData()
})

definePageMeta({
  key: route => 'view-product', // prevent newing up a component on each link click - reuse existing
})
</script>

<template>
  <product-view :product="product"/>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { isEmpty } from 'lodash'
import { useCatalogStore } from '@/pinia/CatalogStore'

const route = useRoute()
const product: any = useState()
const productSlug: ComputedRef<string> = computed(() => {
  return route.params.product_slug as string
})
const CatalogStore = useCatalogStore()

const setProductData = async(isServerSide: boolean = false) => {
  if (productSlug.value) {
    product.value = await CatalogStore.fetchProductBySlug({
      is_server_side: isServerSide,
      slug: productSlug.value
    })
  }
}

onMounted(async() => {
  if (isEmpty(product.value)) {
    await setProductData()
  }
})

onServerPrefetch(async() => {
  await setProductData(true)
})

watch(productSlug.value, async () => {
  await setProductData()
})

definePageMeta({
  key: route => 'view-product', // prevent newing up a component on each link click - reuse existing
})
</script>