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

功能

完全 TypeScript 支援，基於 Snipcart 介面文件
完整支援 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 了 ✨

隨時歡迎參考我們精美的 Playground 範例。

useSnipcart

我們盡量不圍繞 Snipcart API 建立過多的封裝器，這樣如果 Snipcart 變更時，我們就不必維護那麼多。但您可能會發現其中一些很有用，例如

公開 snipcart 實例
`isReady` 將定義基本設定已準備好使用，但 Snipcart 尚未載入
在 snipcart 上使用 watch 以確保它已準備就緒
即時商店訂閱
實用工具函式，例如 `bindProductItem` 或 `bindProductItemCustom`
封裝器實用工具函式，分別使用 setLanguage 或 setCurrency 來變更語言或貨幣

由於我們有完整的 TypeScript 支援，請盡情使用並閱讀公開內容的描述。

載入

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

如果您異步載入，請考慮到在載入完成之前，您將無法存取 `window.Snipcart` 或 `useSnipcart` 公開的 `snipcart`。因此，請調整您的邏輯。請查看 Playground，我們已新增了一些註解

客製化

透過 Nuxt，客製化 Snipcart 元件非常容易。除了自訂 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