如果您正在寻找 nuxt 2 版本，请使用1.x 版本

特性

基于 snipcart 接口文档的完整 typescript 支持
开箱即用的完整 snipcart 文档支持
通过 nuxt3 的强大功能进行高度自定义

快速设置

将 @nuxtjs/snipcart 依赖项添加到您的项目

npx nuxi@latest module add snipcart

将 @nuxtjs/snipcart 添加到 nuxt.config.ts 的 modules 部分

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/snipcart'
  ],
  snipcart: {
    publicApiKey: "youkey"
  }
})

就是这样！您现在可以在您的 Nuxt 应用程序中使用 Snipcart ✨

请随时查看我们精美的 playground 示例。

useSnipcart

我们尽量不在 Snipcart api 周围创建太多包装器，这样如果 Snipcart 发生更改，我们就不必维护太多。但是您可能会发现其中一些很有用，例如

暴露 snipcart 实例
isReady 将定义基本设置已准备好使用，但 snipcart 尚未加载
在 snipcart 上使用 watch 以确保其已准备就绪
实时商店订阅
utils 函数，如 bindProductItem 或 bindProductItemCustom
包装器 utils 函数，分别使用 setLanguage 或 setCurrency 更改语言或货币

由于我们有完整的 typescript 支持，请使用它并阅读公开内容的描述。

加载

我们正在遵循 Snipcart 不同的加载方式。您可以使用 loadStrategy 配置属性来控制 js 的加载。您可以告诉 snipcart 不要使用 loadCSS 配置属性加载 css。

如果您异步加载，请考虑到在加载完成之前，您将无法访问 window.Snipcart 或 useSnipcart 公开的 snipcart。因此请调整您的逻辑。查看 playground，我们添加了一些注释

自定义

使用 nuxt 可以非常轻松地自定义 snipart 组件。除了自定义 html 之外，还可以使用您自己的 class css 来覆盖 snipcart 组件。

为此，例如创建 public/snipcart-custom.html，就像 playground 内部一样。并确保使用 templatesUrl 属性在 nuxt 配置中添加路径

 snipcart: {
    templatesUrl: '/snipcart-custom.html',

之后，这将传递给 snipcart，以了解要检索哪些文件才能访问它将用于构建 snipcart 组件的所有模板

Snipcart SDK

正如我们之前所说，我们默认使用 window.Snipcart 或来自 composable useSnipcart 公开 snipcart SDK。因此，您将拥有与 snipcart SDK 完全相同的访问权限

开发

# Install dependencies
pnpm install

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Release new version
pnpm release