Nuxt Shopify

轻松将 shopify 集成到你的 nuxt 应用中。

🚀 功能

来自 GraphQL 操作的热重载自动生成的 Typescript 类型，以便轻松访问 Shopify API

nuxt-shopify-demo

即插即用 Shopify 集成
具有热重载的完全类型化的 GraphQL 操作
Nuxt 3 和 4 就绪
Storefront 和 Admin API 支持
可自定义的 GraphQL 代码生成
沙盒化的 GraphiQL Explorer 集成

📦 安装

运行以下命令以在你的项目中安装该模块

npm install -D @konkonam/nuxt-shopify

将该模块添加到你的 nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@konkonam/nuxt-shopify',
    ],
})

将你的 Shopify 配置添加到 nuxt.config.ts

export default defineNuxtConfig({
    shopify: {
        name: 'quickstart-abcd1234',
        clients: {
            storefront: {
                apiVersion: '2024-10',
                publicAccessToken: 'YOUR_ACCESS_TOKEN',
            },

            admin: {
                apiVersion: '2024-10',
                accessToken: 'YOUR_ACCESS_TOKEN',
            },
        },
    },
})

🛠️ 用法

类型生成

安装后，该模块会自动生成你的 GraphQL 类型并将它们保存在

.nuxt/types — 类型定义
.nuxt/schema — GraphQL 模式文件

要启用 IDE 支持，请添加一个 GraphQL 配置文件

# ~/graphql.config.yml

schema:
  - ./.nuxt/schema/storefront.schema.json
  - ./.nuxt/schema/admin.schema.json

通过 Nitro 端点访问 API

该模块公开了通过 Nitro 端点访问每个 API 的实用程序。

Storefront API 示例

你可以使用 useStorefront 实用程序来访问 storefront API

// ~/server/api/products.ts

export default defineEventHandler(async () => {
    const storefront = useStorefront()

    return await storefront.request(`#graphql
        query FetchProducts($first: Int) {
            products(first: $first) {
                nodes {
                    id
                    title
                    description
                }
            }
        }
    `, {
        variables: {
            first: 3,
        },
    })
})

请注意我们如何在事件处理程序内部使用 graphql 指令，这之所以可能，是因为在标准模块配置中，所有 .ts 和 .gql 文件都会自动为 storefront API 进行处理，只要它们不以 .admin.ts 或 .admin.gql 结尾。阅读更多关于 codegen 配置的信息。

现在我们可以调用 /api/products 上的 API 来获取前三个产品

// ~/pages/your-page.vue

const { data, error } = await useFetch('/api/products')

data 变量将被类型化为 Ref<ClientResponse<FetchProductsQuery>>，这启用了自动完成和完整的类型检查。

Admin API 示例

以 .admin.ts 或 .admin.gql 结尾的文件将自动为 admin API 进行处理。我们可以使用 useAdmin 实用程序在 nitro 事件处理程序中访问 admin API

// ~/server/api/your-admin-api-handler.ts

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

    return await admin.request(...)
})

有关完整示例，请参阅 Admin API 示例。

🤝 贡献

克隆此仓库
使用以下命令安装依赖项
```
pnpm install
```
(确保通过 corepack enable 启用 pnpm。了解更多。)
运行 pnpm run dev:prepare 以生成类型存根。
使用以下命令启动默认 playground
```
pnpm run dev
```

📜 许可证

在 MIT 许可证下发布。