Vant Nuxt

適用於 Nuxt 的 Vant 模組

功能特色

• 自動依需求匯入元件和樣式。
• 自動匯入 showDialog、showToast 和其他方法。

安裝

npx nuxi@latest module add vant
# or
npm i vant @vant/nuxt -D

export default defineNuxtConfig({
  modules: ['@vant/nuxt'],
  vant: {
    /** Options */
  },
});

使用方式

<template>
  <van-button type="primary" @click="showToast('toast')">button</van-button>
  <VanButton type="success" @click="showNotify('notify')">button</VanButton>
  <LazyVanButton type="default">lazy button</LazyVanButton>
</template>

請參考 Nuxt 文件 和 playground 的使用方式。

選項

lazyload

• 類型：boolean | object
• 預設值：false

如何從 lazyload 載入指令和元件。

例如：{ lazyComponent: true }

importStyle

• 類型：boolean
• 預設值：true

是否自動匯入樣式。

defaultLocale

• 類型：string

取代預設的語系，您可以在這裡找到語系列表。

excludeExports

• 類型：array
• 預設值：['Lazyload', 'Locale']

排除 Vant 中非元件內容的匯出。

components

• 類型：array

如果有 Vant 中未自動匯入的元件，您需要在此處新增元件。

imports

• 類型：array

如果您希望從 Vant 自動匯入內容，可以在此處新增。

include

• 類型：array
• 預設值：[ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]

包含需要自動匯入樣式的檔案。

exclude

• 類型：array
• 預設值：[/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]

排除不需要自動匯入樣式的檔案。

開發

• 執行 pnpm i 安裝相依性。
• 執行 pnpm dev:prepare 產生型別存根。
• 執行 pnpm dev 在開發模式下啟動 playground。
• 執行 pnpm dev:build 建置 playground。
• 執行 pnpm dev:start 在本地預覽 playground。
• 執行 pnpm build 建置此專案。