Storefront-ui · Nuxt 模組

安裝所有依賴項

使用 Nuxt 3，最快速的入門方式是使用 @storefront-ui/nuxt 模組。Storefront-io Nuxt 模組將會在 nuxt 內自動安裝 @nuxtjs/tailwindcss 和 storefront-ui tailwindcss 預設。

# npm
npm i -D @storefront-ui/nuxt

# yarn
yarn add -D @storefront-ui/nuxt

# pnpm
pnpm add -D @storefront-ui/nuxt

將 Nuxt Tailwind 模組添加到您的 `nuxt.config.ts`

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@storefront-ui/nuxt']
})

Tailwind 設定

由於我們在底層使用 @nuxtjs/tailwindcss，因此可以在 nuxt.config.ts 檔案中使用 tailwindcss 屬性。除此之外，還有預設的 tailwind 方式，透過 tailwind.config.ts 檔案建立設定。

在內部，@nuxtjs/tailwindcss 會合併您可以新增設定的三個位置。依照優先順序，選項為

tailwind.config.ts 檔案
nuxt.config.ts 檔案，使用 tailwindcss 屬性
Storefront UI 預設設定

::tip 新增已安裝套件的路徑為了讓 Tailwind 正確偵測 Storefront UI 元件中使用的工具類別，您需要將 node_modules 資料夾所在的路徑新增到 content 屬性。在下面的範例中，我們使用的是 node_modules 的預設位置，但如果您在單一程式碼儲存庫中工作，這個位置可能會變更。:

// tailwind.config.ts
import type { Config } from 'tailwindcss';

export default <Config>{
  content: ['./**/*.vue'],
};

自訂 `tailwind.css` 檔案

如果您要建立自己的 Tailwind CSS 檔案，請務必為 Tailwind 的每個圖層類型 (base、components 和 utilities) 新增 @tailwind 指令。

/* ~/assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

您已準備就緒

現在，您可以在您的應用程式中匯入 Storefront UI 元件，並且 @storefront-ui/vue 程式庫中的所有 Tailwind 工具都可以在您的專案中使用。因為 storefront-ui 也從模組提供，所以可以透過 Nuxt 自動匯入取得 @storefront-ui/vue。