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