feat: Added client side storefront api access

freb97 · freb97 · commit c58ce8b8548f · 2025-04-26T03:12:25.000+02:00
Signed-off-by: Frederik Bußmann &lt;frederik@bussmann.io&gt;
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -37,4 +37,4 @@ jobs:
       - name: Release module
         run: |
           pnpm set //registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
-          pnpm release
+          pnpm release || true
diff --git a/README.md b/README.md
@@ -4,6 +4,7 @@
 
 # Nuxt Shopify
 
+[![Github Actions][github-actions-src]][github-actions-href]
 [![NPM version][npm-version-src]][npm-version-href]
 [![NPM downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
@@ -168,14 +169,17 @@ For a full example, see [Admin API examples](https://konkonam.github.io/nuxt-sho
 
 Published under the [MIT License](https://github.com/konkonam/nuxt-shopify/tree/main/LICENSE).
 
+[github-actions-src]: https://github.com/konkonam/nuxt-shopify/actions/workflows/test.yml/badge.svg
+[github-actions-href]: https://github.com/konkonam/nuxt-shopify/actions
+
 [npm-version-src]: https://img.shields.io/npm/v/@konkonam/nuxt-shopify/latest.svg?style=flat&colorA=18181B&colorB=31C553
 [npm-version-href]: https://npmjs.com/package/@konkonam/nuxt-shopify
 
 [npm-downloads-src]: https://img.shields.io/npm/dm/@konkonam/nuxt-shopify.svg?style=flat&colorA=18181B&colorB=31C553
 [npm-downloads-href]: https://npmjs.com/package/@konkonam/nuxt-shopify
 
-[license-src]: https://img.shields.io/github/license/konkonam/nuxt-shopify.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-src]: https://img.shields.io/github/license/konkonam/nuxt-shopify.svg?style=flat&colorA=18181B&colorB=31C553
 [license-href]: https://github.com/konkonam/nuxt-shopify/tree/main/LICENSE
 
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt
 [nuxt-href]: https://nuxt.com
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,33 @@
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+export default createConfigForNuxt({
+    features: {
+        tooling: true,
+        typescript: {
+            strict: true,
+        },
+        stylistic: {
+            indent: 4,
+            semi: false,
+            quotes: 'single',
+        },
+    },
+}).override('nuxt/vue/rules', {
+    rules: {
+        'vue/multi-word-component-names': 'off',
+    },
+}).override('nuxt/import/rules', {
+    rules: {
+        'import/order': ['error', {
+            'groups': [
+                'type',
+                ['builtin', 'external'],
+                ['internal', 'parent', 'sibling', 'index', 'object'],
+            ],
+            'newlines-between': 'always',
+            'alphabetize': {
+                order: 'asc',
+            },
+        }],
+    },
+})
diff --git a/package.json b/package.json
@@ -29,17 +29,17 @@
     "scripts": {
         "build": "nuxt-module-build build",
         "build:docs": "vitepress build docs",
-        "dev": "nuxi dev playgrounds/playground",
+        "dev": "pnpm run --filter=playground dev",
+        "dev:v4": "pnpm run --filter=playground-nuxt-v4 dev",
         "dev:docs": "vitepress dev docs",
-        "dev:v4": "nuxi dev playgrounds/playground-nuxt-v4",
         "preview:docs": "vitepress preview docs",
         "release": "pnpm publish --no-git-checks",
         "lint": "eslint .",
         "typecheck": "vue-tsc --noEmit",
         "analyze": "pnpm run --filter=./playgrounds/playground analyze",
         "prepare": "nuxt-module-build prepare",
         "prepare:dev": "pnpm run --filter=./playgrounds/* prepare",
-        "cleanup": "pnpm run --filter=./playgrounds/playground cleanup && nuxi cleanup && rm -rf node_modules"
+        "cleanup": "pnpm run --filter=* cleanup && nuxi cleanup"
     },
     "dependencies": {
         "@graphql-codegen/cli": "^5.0.5",
diff --git a/playgrounds/playground-nuxt-v4/nuxt.config.ts b/playgrounds/playground-nuxt-v4/nuxt.config.ts
@@ -1,6 +1,8 @@
 import * as dotenv from 'dotenv'
 
-dotenv.config()
+dotenv.config({
+    path: '../../.env',
+})
 
 export default defineNuxtConfig({
     modules: [
diff --git a/playgrounds/playground-nuxt-v4/package.json b/playgrounds/playground-nuxt-v4/package.json
@@ -1,16 +1,17 @@
 {
-    "name": "playground",
+    "name": "playground-v4",
     "private": true,
     "type": "module",
     "scripts": {
-        "dev": "nuxi dev",
-        "build": "nuxi build",
-        "prepare": "nuxi prepare",
-        "analyze": "nuxi analyze",
-        "cleanup": "nuxi cleanup && rm -rf node_modules"
+        "dev": "nuxt dev",
+        "build": "nuxt build",
+        "prepare": "nuxt prepare",
+        "analyze": "nuxt analyze",
+        "cleanup": "nuxt cleanup",
+        "typecheck": "vue-tsc --noEmit"
     },
     "dependencies": {
         "nuxt": "^3.16.2",
         "zod": "^3.24.3"
     }
-}
+}
diff --git a/playgrounds/playground/nuxt.config.ts b/playgrounds/playground/nuxt.config.ts
@@ -1,6 +1,8 @@
 import * as dotenv from 'dotenv'
 
-dotenv.config()
+dotenv.config({
+    path: '../../.env',
+})
 
 export default defineNuxtConfig({
     modules: [
@@ -20,6 +22,8 @@ export default defineNuxtConfig({
             storefront: {
                 apiVersion: process.env.SHOPIFY_STOREFRONT_API_VERSION ?? '',
                 publicAccessToken: process.env.SHOPIFY_STOREFRONT_PUBLIC_TOKEN ?? '',
+
+                client: true,
             },
         },
     },
diff --git a/playgrounds/playground/package.json b/playgrounds/playground/package.json
@@ -3,14 +3,15 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev": "nuxi dev",
-        "build": "nuxi build",
-        "prepare": "nuxi prepare",
-        "analyze": "nuxi analyze",
-        "cleanup": "nuxi cleanup && rm -rf node_modules"
+        "dev": "nuxt dev",
+        "build": "nuxt build",
+        "prepare": "nuxt prepare",
+        "analyze": "nuxt analyze",
+        "cleanup": "nuxt cleanup",
+        "typecheck": "vue-tsc --noEmit"
     },
     "dependencies": {
         "nuxt": "^3.16.2",
         "zod": "^3.24.3"
     }
-}
+}
diff --git a/playgrounds/playground/src/pages/client.vue b/playgrounds/playground/src/pages/client.vue
@@ -0,0 +1,25 @@
+<script type="setup" setup lang="ts">
+const storefront = useStorefront()
+
+const { data } = await storefront.request(`#graphql
+    query FetchFirstThreeProducts($first: Int) {
+        products(first: $first) {
+            nodes {
+                id
+                title
+                description
+            }
+        }
+    }
+`, {
+    variables: {
+        first: 3,
+    },
+})
+</script>
+
+<template>
+    <div>
+        <pre>{{ data?.products }}</pre>
+    </div>
+</template>
diff --git a/playgrounds/playground/tsconfig.json b/playgrounds/playground/tsconfig.json
@@ -1,3 +1,3 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -0,0 +1,6 @@
+packages:
+  - .
+  - playgrounds/*
+
+onlyBuiltDependencies:
+  - sharp
diff --git a/src/module.ts b/src/module.ts
@@ -1,11 +1,11 @@
 import type {
-    ModuleOptions,
     ShopifyClientType,
-} from './types'
+    ModuleOptions } from './types'
 
 import {
     createResolver,
     defineNuxtModule,
+    addImports,
     addServerImports,
     updateRuntimeConfig,
 } from '@nuxt/kit'
@@ -41,7 +41,7 @@ export default defineNuxtModule<ModuleOptions>({
             log.start('Starting setup')
 
             const resolver = createResolver(import.meta.url)
-            const config = useShopifyConfig(moduleOptions.data)
+            const { config, publicConfig } = useShopifyConfig(moduleOptions.data)
 
             for (const _clientType in config.clients) {
                 const clientType = _clientType as ShopifyClientType
@@ -64,6 +64,13 @@ export default defineNuxtModule<ModuleOptions>({
 
                 const functionName = `use${upperFirst(clientType)}`
 
+                if (clientConfig.client) {
+                    addImports([{
+                        from: resolver.resolve(`./runtime/composables/${functionName}`),
+                        name: functionName,
+                    }])
+                }
+
                 addServerImports([{
                     from: resolver.resolve(`./runtime/server/utils/${functionName}`),
                     name: functionName,
@@ -74,6 +81,8 @@ export default defineNuxtModule<ModuleOptions>({
 
             updateRuntimeConfig({
                 _shopify: config,
+
+                public: { _shopify: publicConfig },
             })
 
             log.success('Finished setup')
diff --git a/src/runtime/composables/useStorefront.ts b/src/runtime/composables/useStorefront.ts
@@ -0,0 +1,13 @@
+import { createStorefrontApiClient } from '@shopify/storefront-api-client'
+
+import { useRuntimeConfig } from '#imports'
+
+export function useStorefront() {
+    const { _shopify } = useRuntimeConfig().public
+
+    if (!_shopify) {
+        throw new Error('Could not create storefront client')
+    }
+
+    return createStorefrontApiClient(_shopify)
+}
diff --git a/src/runtime/server/utils/useStorefront.ts b/src/runtime/server/utils/useStorefront.ts
@@ -13,6 +13,7 @@ export function useStorefront() {
         skipCodegen: _skipCodegen,
         sandbox: _sandbox,
         documents: _documents,
+        client: _client,
         ...options
     } = _shopify.clients.storefront
 
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
diff --git a/src/types/shopify.d.ts b/src/types/shopify.d.ts
diff --git a/src/utils/config.ts b/src/utils/config.ts
diff --git a/src/utils/sandbox.ts b/src/utils/sandbox.ts

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "extends": "./.nuxt/tsconfig.json"`
	`2`	`+ "extends": "./.nuxt/tsconfig.json",`
`3`	`3`	`}`