vant-ui/vant-nuxt

Vant module for Nuxt

Vant Nuxt

Vant module for Nuxt

Features

• Automatically import components and styles on demand.
• Automatically import of showDialog, showToast and other methods.

Install

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

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

Usage

<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>

Reference Nuxt documentation and playground use.

Options

lazyload

• Type: boolean | object
• Default: false

How to load directives and components from lazyload.

eg. { lazyComponent: true }

importStyle

• Type: boolean
• Default: true

Whether to automatically import styles.

excludeExports

• Type: array
• Default: ['Lazyload', 'Locale']

Exclude exports from Vant that are not component content.

components

• Type: array

If there are components that are not imported automatically from Vant, you need to add the component here.

imports

• Type: array

If you wish to add automatically import content from Vant, you can add it here.

include

• Type: array
• Default: [ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]

Include files that need to automatically import styles.

exclude

• Type: array
• Default: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]

Exclude files that do not require the automatic import of styles.

Development

• Run pnpm i to install the dependencies.
• Run pnpm dev:prepare to generate type stubs.
• Run pnpm dev to start playground in development mode.
• Run pnpm dev:build to build playground.
• Run pnpm dev:start to locally preview playground.
• Run pnpm build to build this project.

vant-nuxt's Issues

van-image-preview

van-image-preview v-model:show="show" :startPosition="index" transition="van-fade" :images="images"
template #image="{ src }"
img :src="src"/
template
van-image-preview

使用了vant-nuxt用这段代码只显示第一张图，鼠标左右拉都不动。我是在电脑上测试，但用plugin的方式自己写一个手工插件的方式就可以。注明已安装@vant/touch-emulator，而且我在调式的时候发现你们这个方式加载多少个组件就加载多少个css出来，这实在是太占连接了。应该弄成一个总的出来。否则人流量大的时候，服务器连接资源都被占光了。

cascader组件需要包裹ClientOnly才能正常使用

<van-popup v-model:show="showCascader" round position="bottom">
  <van-cascader
    v-model="cascaderValue"
    title="请选择所在地区"
    :options="options"
    @close="showCascader = false"
  />
</van-popup>

这样直接使用会卡顿，我加上<ClientOnly>后正常

<van-popup v-model:show="showCascader" round position="bottom">
  <ClientOnly>
    <van-cascader
      v-model="cascaderValue"
      title="请选择所在地区"
      :options="options"
      @close="showCascader = false"
    />
  </ClientOnly>
</van-popup>

vant 4 组件不支持SSR么？

采用vant-nuxt 和nuxt3 构建H5，发现大部分组件不支持SSR渲染，是不是不支持SSR?

如何适配750设计稿

nuxt3 采用 postcss-px-to-viewport方案 如何才能适配750的设计搞呢

有没有基于vue2版本的版本

Image组件，当src不存在或者src错误的情况下，我使用了error插槽，但是结果还是加载中的样式

<van-image>
  <template #loading>
    <p>图片加载中</p>
  </template>
  <template #error>
     <p>图片加载失败</p>
  </template>
</van-image>

期望结果：当图片路径不存在或者路径错误时，应该显示error插槽内的内容，而不是loading插槽内的内容

Cannot find package 'vant'

I'm getting an error when I try to use this module using yarn add -D @vant/nuxt alone as stated on the README:

Cannot find package 'vant' imported from .../node_modules/@vant/nuxt/dist/module.mjs

I still need to install vant manually with yarn add -D vant.

全局方法如showToast不能给出正确的提示

nuxt中的定义是来源于cjs的，尽管vant本身有dts
import.d.ts中的showToast为any类型，无法提供参数提示

nuxt3的vant中，生产环境样式错乱问题

在该链接中能找到相似的问题，youzan/vant#11049
但是目前解决方案是将按需引入改为全局引入。
那么nuxt3的vant中，是否有这个配置修改呢？

Vant needs to be manually introduced

Vant needs to be manually introduced

自动引入组件css分离后因加载顺序异常导致显示错误

包版本：
nuxt:3.8.2
Nitro:2.8.1
Vant:4.8.0
@vant/nuxt:1.0.4
问题：
css文件顺序导致多个类名的元素css属性被覆盖
复现：
问题暂时无法提供最小化情况复现，在nuxt dev时不存在该情况
复现要求：
1.项目总体积达到一点程度后
会因为多两行行注释而异常，少两行注释则正常，也是无法提供最小化复现的原因
猜测当总体积小于一定量的时候，vant的样式不会被拆分，会全部放在entry.css中
2.需要通过nuxt build出来node运行
3.受路由影响
首页跳转到页面a，点击触发showImagePreview => 异常
直接通过完整访问ssr的路由，点击触发showImagePreview => 正常
4.影响组件包括但不限于showImagePreview、van-search
上诉4点须同时满足，暂未确定其他影响因素

表现：
异常表现：

期望/正常表现：

暂时的解决方案：
弃用@vant/nuxt，使用传统模式注册vant，如
/plugins/vant.js
`import vant from 'vant'
import 'vant/lib/index.css'

export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(vant)
})
`

vant库不兼容UC浏览器嘛

使用vant组件中的tabs组件在支付宝和钉钉中打开都不展示

Error:can't import Layload on startup

once the @vant/nuxt installed and run the Dev, the error occur:

ERROR Failed to resolve import "vant/es/lazyload/Lazyload" from "virtual:nuxt:D:\projects\www.ok.ltd.nuxt\components.client.mjs".

could you help me?

How about move "vant" from the "devDependencies" to the "dependencies"?

When i install this package by @nuxt/devtools, it will interrupt

How about move "vant" from the "devDependencies" to the "dependencies", just like the @unocss/nuxt

如何按需引入组件，包括样式的按需加载

该 vant-nuxt是基于vant的哪个版本？

rt

ERR_PNPM_FETCH_404

pnpm add @vant/nuxt -D

GET https://registry.npmmirror.com/@vant%2Fnuxt: Not Found - 404

vant/nuxt is not in the npm registry, or you have no permission to fetch it.

nuxt3中修改srcDir属性为'/src'后使用vant组件类型声明找不到

nuxt3中使用vant


将vant类型声明文件修改后可用，但保存后项目会自动改为vue


如何解决

使用 `@vant/nuxt` 问题

使用 @vant/nuxt 之后是否还需要在 nuxt.config.ts 中配置 transpile？

build: {
  transpile: ['vant'],
}