通过 100+ 条技巧学习 Nuxt!

snipcart
@nuxtjs/snipcart

用于 Nuxt 的 Snipcart 集成模块

@nuxtjs/snipcart

npm 版本npm 下载量许可证 发行说明

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

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

功能

  • 基于 snipcart 接口文档 的完整 TypeScript 支持
  • 开箱即用的 Snipcart 文档的完整支持
  • 通过 nuxt3 的强大功能实现高度自定义

快速设置

  1. @nuxtjs/snipcart 依赖项添加到您的项目
npx nuxi@latest module add snipcart
  1. @nuxtjs/snipcart 添加到 nuxt.config.tsmodules 部分
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/snipcart'
  ],
  snipcart: {
    publicApiKey: "youkey"
  }
})

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

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

useSnipcart

我们尽量不为 Snipcart API 创建太多包装器,这样如果 Snipcart 发生更改,我们就不必维护那么多。但您可能会发现其中一些很有用,例如

  • 公开 Snipcart 实例
  • isReady 将定义基本设置已准备好使用,但 Snipcart 尚未加载
  • 使用 watch 监控 Snipcart 以确保它已准备好
  • 实时商店订阅
  • 实用函数,如 bindProductItem 或 bindProductItemCustom
  • 包装器实用函数,分别使用 setLanguagesetCurrency 更改语言或货币

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

加载

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

如果您加载异步,请考虑在加载完成之前您将无法访问 window.SnipcartuseSnipcart 公开的 snipcart。所以请调整您的逻辑。请查看我们在演示中添加的一些注释

自定义

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

为此,请创建一个例如 public/snipcart-custom.html 作为演示内部。并确保使用 templatesUrl 属性在 nuxt 配置中添加路径

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

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

Snipcart SDK

正如我们之前所说,我们默认使用 window.Snipcart 或通过组合式 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