基于 Snipcart 接口文档的完整 TypeScript 支持
开箱即用的 Snipcart 文档完全支持
利用 Nuxt 3 的强大功能进行高度自定义

快速设置

将 @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 ✨

随时查看我们漂亮的游乐场示例。

useSnipcart

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

公开 Snipcart 实例
isReady 将定义基本设置已准备好使用，但 Snipcart 尚未加载
在 Snipcart 上使用 watch 以确保它已准备好
实时存储订阅
实用程序函数，如 bindProductItem 或 bindProductItemCustom
包装器实用程序函数，分别使用 setLanguage 或 setCurrency 更改语言或货币

由于我们有完整的 TypeScript 支持，因此可以与之交互并阅读公开内容的描述。

加载

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

如果您异步加载，请考虑在加载之前无法访问 window.Snipcart 或 useSnipcart 公开的 snipcart。因此，请调整您的逻辑。在游乐场中，我们添加了一些注释。

自定义

使用 Nuxt，自定义 Snipcart 组件非常容易。除了自定义 html 之外，还可以使用您自己的类 css 来覆盖 Snipcart 组件。

为此，例如在游乐场内部创建 public/snipcart-custom.html。并确保您使用 templatesUrl 属性在 Nuxt 配置中添加路径。

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

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

Snipcart SDK

正如我们之前所说，我们公开 Snipcart SDK，默认情况下使用 window.Snipcart 或来自可组合的 useSnipcart。因此，您将对 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

@nuxtjs/snipcart

@nuxtjs/snipcart

如果您喜欢使用此模块，请考虑赞助

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

功能

快速设置

useSnipcart

加载

自定义

Snipcart SDK

开发