Storefront-ui · Nuxt Modules

安裝所有依賴項

使用 Nuxt 3，最快速的入門方式是使用 @storefront-ui/nuxt 模組。Storefront-io Nuxt 模組將會在 nuxt 和 storefront-ui tailwindcss 預設中自動安裝 @nuxtjs/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 檔案
具有 tailwindcss 屬性的 nuxt.config.ts 檔案
Storefront UI 預設設定

::tip 新增已安裝套件的路徑為了讓 Tailwind 能夠正確偵測 Storefront UI 元件中使用的 utility classes，您需要將路徑新增至 node_modules 資料夾所在位置的 content 屬性。在以下範例中，我們使用 node_modules 的預設位置，但如果您在 monorepo 中工作，則可能會有所變更。 :

// 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 utility 都將在您的專案中可用。由於 storefront-ui 也從模組提供，因此可以從 Nuxt autoimport 取得 @storefront-ui/vue。