To show products to your customers, you may want to retrieve a collection and display it in your store. This recipe will show you how to create a collection page for your Shopify store in Nuxt.
Unisex
High-quality unisex clothing, expertly designed to marry style with comfort. From elegantly tailored office wear to chic casual pieces perfect for a weekend getaway.


<script setup lang="ts">
const route = useRoute()
const key = `collection-${route.params.handle}`
const { data: collection } = await useStorefrontData(key, `#graphql
query GetCollection(
$handle: String!,
$first: Int,
$last: Int,
$after: String,
$before: String,
$language: LanguageCode,
$country: CountryCode
)
@inContext(language: $language, country: $country) {
collection(handle: $handle) {
...CollectionFields
products(
first: $first,
last: $last,
after: $after,
before: $before
) {
...ProductConnectionFields
}
}
}
${COLLECTION_FRAGMENT}
${PRODUCT_CONNECTION_FRAGMENT}
`, {
variables: {
handle: route.params.handle,
first: 4,
language: 'EN',
country: 'US',
},
transform: data => data.collection,
})
const products = computed(() => flattenConnection(collection.value?.products))
</script>
<template>
<div>
<p class="mb-4 text-2xl font-bold">
{{ collection?.title }}
</p>
<p class="mb-6">
{{ collection?.description }}
</p>
<div class="grid gap-4 grid-cols-1 sm:gap-8 md:grid-cols-2">
<ProductCard
v-for="product in products"
:key="product.id"
:product="product"
/>
</div>
</div>
</template>