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 以构建此项目。