vant-ui / vant-nuxt Goto Github PK

nuxt3中使用vant


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


如何解决

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?

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 needs to be manually introduced

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

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.

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

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

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

环境
"nuxt": "^3.11.2",
"vue": "^3.4.21",
"@vant/nuxt": "^1.0.4"

van-button 可以正常渲染，点击事件无效
van-list 直接渲染失败

nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vant/nuxt'],
})

配置如上

The Nuxt3 official website does not have any relevant introduction.

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

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

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出来，这实在是太占连接了。应该弄成一个总的出来。否则人流量大的时候，服务器连接资源都被占光了。

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.

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

rt

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

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

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

包版本：
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)
})
`