如果您正在尋找 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 ✨

請隨時查看我們精美的遊樂場範例。

useSnipcart

我們盡量不在 Snipcart API 周圍建立太多包裝器，這樣如果 Snipcart 發生變更，我們就不必維護太多。但您可能會發現它們中的一些很有用，例如

公開 snipcart 實例
isReady 將定義基本設定已準備好使用，但尚未載入 snipcart
使用 watch 監看 snipcart 以確保其已準備就緒
即時商店訂閱
實用程式函數，如 bindProductItem 或 bindProductItemCustom
包裝器實用程式函數，分別使用 setLanguage 或 setCurrency 來變更語言或貨幣

由於我們完全支援 typescript，請試用並閱讀所公開內容的說明。

載入

我們遵循 Snipcart 的不同載入方式。您可以使用 loadStrategy 設定屬性來控制 js 的載入。您可以使用 loadCSS 設定屬性來告知 snipcart 不要載入 css。

如果您以非同步方式載入，請考慮到在載入之前，您將無法存取 window.Snipcart 或 useSnipcart 公開的 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