File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -23,6 +23,7 @@ Hot-reloaded auto-generated typescript types from GraphQL operations for easy ac
2323![ nuxt-shopify-demo] ( https://raw.githubusercontent.com/konkonam/nuxt-shopify/refs/heads/main/docs/public/demo.gif )
2424
2525- Plug & play Shopify integration
26+ - Server & client side
2627- Fully typed GraphQL operations with hot-reloading
2728- Nuxt 3 & 4 ready
2829- Storefront and Admin API support
@@ -93,6 +94,45 @@ The module exposes utilities to access each API via Nitro endpoints.
9394#### Storefront API example
9495
9596You can use the ` useStorefront` utility to access the storefront API:
97+ The Storefront API can be used on the client and on the server.
98+
99+ # #### Client
100+
101+ > [!NOTE]
102+ > To access the `useStorefront` composable on the client side, make sure you have
103+ > set the option `clients > storefront > client` to `true`
104+
105+ ` ` ` html
106+ // ~/components/Products.vue
107+
108+ <script type="setup" setup lang="ts">
109+ const storefront = useStorefront()
110+
111+ const { data } = await storefront.request(` #graphql
112+ query FetchProducts($first : Int) {
113+ products(first : $first) {
114+ nodes {
115+ id
116+ title
117+ description
118+ }
119+ }
120+ }
121+ ` , {
122+ variables: {
123+ first: 3,
124+ },
125+ })
126+ </script>
127+
128+ <template>
129+ <div>
130+ <pre>{{ data?.products }}</pre>
131+ </div>
132+ </template>
133+ ` ` `
134+
135+ # #### Server
96136
97137` ` ` typescript
98138// ~/server/api/products.ts
You can’t perform that action at this time.
0 commit comments