vuecomponent / ant-design-vue-nuxt Goto Github PK

The remove button only appeared for the first selection option, others weren't appearing like they are supposed to.

Expected result:
Remove buttons to appear for all selected options

Reproduction:
https://stackblitz.com/edit/github-52q5xr-yeyoni?file=scripts%2FgenAntdStyle.ts,pages%2Findex.vue

Vue warn]: Component PortalWrapper is missing template or render function.

点击按钮后，控制台会报错

I have this ts error when using extractStyle for solving page css flicker problem in nuxt.config.ts:

Type '{ extractStyle: true; }' is not assignable to type 'Partial<Partial<Options>>'.
  Object literal may only specify known properties, and 'extractStyle' does not exist in type 'Partial<Partial<Options>>'.

Here's my nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    "@ant-design-vue/nuxt",
    // Other modules
    ],
    ...
  antd: {
    extractStyle: true,
  },
 ...
})

I have tried to ignore TS on that line by using // @ts-expect-error:next-line but in my app.ts, I have this waring: [Vue warn]: Failed to resolve component: a-extract-style

My app.ts:

<template>
  <a-extract-style>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </a-extract-style>
</template>

My project: Nuxt 3.9.0, @ant-design-vue/nuxt 1.3.0

更新到"@ant-design-vue/nuxt": "^1.1.1" 刷新页面css加载还是慢一步。测试无效

起码 Volar 不能正确的在模板中提供组件的类型。

When reloading a page antd css has a delay which results to a bad ux behavior

After some benchmark, i notice that if i remove a-config-provider, nuxt continues to work without using entire server memory and crashing after a couple of hours. I don't know if this came from actual antdv library or using it inside nuxt with this module.

any idea?
thanks in advance.

浏览器中审查元素，发现ant开头的class样式等都不生效，不知道为什么？代码如下：

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@ant-design-vue/nuxt'
  ],
})

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.10.3",
    "vue": "^3.4.19",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@ant-design-vue/nuxt": "^1.4.1"
  }
}

app.vue

<template>
  <div>
    <a-button>
      button
    </a-button>
  </div>
</template>

Code:

  <a-extract-style>
    <a-textarea placeholder="text field" />
  </a-extract-style>

causing Nuxt 3 error:

"[Vue warn]: Failed to resolve component: a-extract-style
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement."

Nuxt 3

    "@ant-design-vue/nuxt": "^1.4.1",
    "nuxt": "^3.6.2",

我使用了postcss-pxtorem插件来去自动转换样式里面的px单位为rem。

• 因为 css in js 缘故，所以在开发模式下，无法转换成rem单位。
  
• 在打包后，nuxt generate构建的页面放入生产环境，页面首次加载，css in js 好像没有加上样式。
  

Flex component was missed in allComponents

使用最新版报错
Internal server error: Failed to resolve import "ant-design-vue/es" from "pages\about.vue". Does the file exist? 13:54:27

                                                                                                                                        13:54:50

ERROR Internal server error: Failed to resolve import "ant-design-vue/es" from "pages\about.vue". Does the file exist?

Hi, how can i change dayjs locale dynamicly in Ant Design like in link below?
demo

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@ant-design-vue/nuxt"],
  css: [
    'ant-design-vue/dist/antd.css'
  ],
})

I added this Code from the antdv documentation, but currently it is not working.
If I go forward, the second step doesn't get the 'success' status, and if I move back and want to go forward, it breaks.

test1.vue:19 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at
at <Step key=1 title="Second" class="" ... >
at <Steps icons= {finish: {…}, error: {…}} current=2 items= (3) [{…}, {…}, {…}] ... >
at <ASteps current=2 items= (3) [{…}, {…}, {…}] >
at <Test1 onVnodeUnmounted=fn ref=Ref< Proxy(Object) {__v_skip: true} > >
at <RouteProvider key="/test1" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/test1', hash: '', query: {…}, name: 'test1', path: '/test1', …} ... >
at
at
at
at
at <Anonymous hasSider=undefined prefixCls="ant-layout" tagName="section" ... >
at <ALayout style= {marginLeft: '84px'} >
at <Anonymous hasSider=undefined prefixCls="ant-layout" tagName="section" ... >
at <ALayout style= {max-height: '100vh'} >
at <Anonymous value= {hashed: true, components: {…}, theme: Theme, token: {…}} >
at
at <LocaleReceiver children=fn >
at <AConfigProvider theme= {algorithm: ƒ} >
at <Default ref=Ref< Proxy(Object) {__v_skip: true} > >
at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" >
at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... >
at
at
at

chunk-BLEO2JDC.js?v=4dd5f70d:5884 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'namespaceURI')
at isSVGContainer (chunk-BLEO2JDC.js?v=4dd5f70d:5884:58)
at hydrateNode (chunk-BLEO2JDC.js?v=4dd5f70d:6039:13)
at hydrateSubTree (chunk-BLEO2JDC.js?v=4dd5f70d:7103:13)
at ReactiveEffect.componentUpdateFn [as fn] (chunk-BLEO2JDC.js?v=4dd5f70d:7123:13)
at ReactiveEffect.run (chunk-BLEO2JDC.js?v=4dd5f70d:422:19)
at instance.update (chunk-BLEO2JDC.js?v=4dd5f70d:7242:52)
at setupRenderEffect (chunk-BLEO2JDC.js?v=4dd5f70d:7250:5)
at mountComponent (chunk-BLEO2JDC.js?v=4dd5f70d:7040:5)
at processComponent (chunk-BLEO2JDC.js?v=4dd5f70d:6993:9)
at patch (chunk-BLEO2JDC.js?v=4dd5f70d:6466:11)

版本:

"devDependencies":` {
    "@ant-design-vue/nuxt": "^1.1.2",
    "@nuxt/devtools": "latest",
    "nuxt": "^3.7.4",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },

nuxt.config.ts文件

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@ant-design-vue/nuxt"],
});

我就是配置了这些, 然后使用就是在官网上找的例子: 然后在刷新的时候, 样式丢失, 刷新完成之后就变正常了

<template>
  <div>
    <!-- <NuxtWelcome /> -->
    <a-tree
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      checkable
      :tree-data="treeData"
    >
      <template #title="{ title, key }">
        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
        <template v-else>{{ title }}</template>
      </template>
    </a-tree>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import type { TreeProps } from "ant-design-vue";

const treeData: TreeProps["treeData"] = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        disabled: true,
        children: [
          { title: "leaf", key: "0-0-0-0", disableCheckbox: true },
          { title: "leaf", key: "0-0-0-1" },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [{ key: "0-0-1-0", title: "sss" }],
      },
    ],
  },
];

const expandedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
const selectedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
const checkedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
watch(expandedKeys, () => {
  console.log("expandedKeys", expandedKeys);
});
watch(selectedKeys, () => {
  console.log("selectedKeys", selectedKeys);
});
watch(checkedKeys, () => {
  console.log("checkedKeys", checkedKeys);
});
</script>

In the nuxt 3 project, I added the Ant-Design-Vue module
nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@ant-design-vue/nuxt'
  ],
  css: ['~/assets/styles/main.scss']
})

Adding a component <a-dropdown> in the project and in the browser, after updating the page, it gives an error (индекс):1 GET http://localhost:3000/ 500 (Internal Server Error)

there is an error in the terminal console: [Vue warn]: Component PortalWrapper is missing template or render function.

Component code:

<script lang="ts" setup>
import { UserOutlined } from '@ant-design/icons-vue'

// Types
import type { ItemType } from 'ant-design-vue'

const items: ItemType[] = reactive([
  {
    key: 'Profile',
    label: 'Настройка профиля',
    onClick: () => {
      console.log(this)
    }
  },
  {
    key: 'LogOut',
    label: 'Выйти',
    onClick: () => {
      console.log(this)
    }
  }
])

</script>

<template>
  <a-dropdown>
    <a-button :shape="'circle'" :type="'primary'" :size="'large'" :icon="h(UserOutlined)"></a-button>
    <template #overlay>
      <h1>menu</h1>
      <a-menu
        :items="items"
      />
    </template>
  </a-dropdown>
</template>

Can anyone tell me why this is happening and how to fix it ?

A message is displayed indicating that the language package cannot be imported.
Mac pro 2021 M1 node-v18.3 pnpm 7

使用 pnpm generate 打包 Nuxt3 项目后所有 ant-design-vue 的组件样式都丢失了, JS 还存在。

依赖:

"dependencies": {
    "ant-design-vue": "^4.0.0",
  },
  "devDependencies": {
    "@ant-design-vue/nuxt": "^1.0.1",
    "nuxt": "^3.6.2",
  }

执行的打包命令:
"generate": "nuxt generate",

Nuxt配置:

export default defineNuxtConfig({
  srcDir: "src/",
  
  modules: ["@ant-design-vue/nuxt"],
});

在项目中的使用方式:
没有手动导入，使用自动导入的

<template>
  <a-button type="primary">Hello Wolrd</a-button>
</template>

<script setup />

打包后该组件的class都还在(antd 本身添加的类名)，但是没有对应的css样式。

"nuxt": "^3.8.2"
"@ant-design-vue/nuxt": "^1.2.0"

app.vue里面添加

<script lang="ts" setup>
const handleMessage = () => {
  message.info("This is a normal message");
};
</script>
<template>
  <a-button @click="handleMessage"> button </a-button>
</template>

点击按钮时，控制台会报一个错

I added this Code from the antdv documentation, but currently it is not working.

Should look like this ->

but looks like this

ui-kit.zip
reproducible code attached to this issue, i was using pnpm (but it doesn't matter, if it's pnpm or npm / yarn)

Steps to reproduce:

1. pnpm install
2. pnpm dev it gets stuck

页面刷新时或首次进入后，有短暂的时间没有样式，请问下如何解决

求教

Hi i'm opening this issue that has been discussed in other issues just to atomize it.

As we saw in previous issues #6 #25 there is already a fix for the default ant theme css delay using the extractStyle method.

Now in my case I would like to use the dark algorithm, but this one seems to not be working.
Maybe I'm doing something wrong.

This is my current setup:

// generateAntStyle.ts
import { extractStyle } from 'ant-design-vue/es/_util/static-style-extract'
import { ConfigProvider, theme } from 'ant-design-vue'
import { h } from 'vue'
import fsExtra from 'fs-extra'

export async function genAntdStyle() {
  const css = extractStyle(node =>
    h(ConfigProvider, {
      theme: { algorithm: theme.darkAlgorithm },
    }, { default: () => node }),
  )
  await fsExtra.outputFile('public/css/antd.css', css, 'utf8')
}

genAntdStyle()

// nuxt.config.ts
...
  app: {
    head: {
      link: [
        {
          rel: 'stylesheet',
          href: '/css/antd.css',
        },
      ],
    },
  },
...

// App.vue
<template>
  <ConfigProvider :locale="esES" :theme="{ algorithm: theme.darkAlgorithm }">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </ConfigProvider>
</template>

In reality I would like to also add a custom antToken :theme="{ ...antToken, algorithm: theme.darkAlgorithm }", but lets start with the dark theme algorithm problem.

My ant-design-vue is on version 4.0.8 ,nuxt is on 3.9.0 and @ant-design-vue/nuxt is on 1.3.0 .

I would really appreciate any help, since i'm close to deploying to production and this is a topic that if can't be solved might mean we have to see how to customize the default theme to a dark one (if that works) or change component library, which would be a pity. At least knowing that this won't be fixed anytime soon is already helpful :) . Thanks beforehand !

Expected

From the ant-design-vue official example, a-layout-sider should collapse normally.

Actual

In the same code's reproduction, a-layout-sider does not collapse as expected.

Please note that this issue occurs only when collapsing and then switching menu items. Furthermore, after switching, the disappearance of the icon could be the main cause.

The following error message is generated:

runtime-core.esm-bundler.js:41 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <DashboardOutlined> 
  at <TooltipContent key="content" prefixCls="aj-tooltip" id=undefined  ... > 
  at <Align target=fn<bound getRootDomNode> key="popup" ref=Ref< Proxy(Object) {__v_skip: true, forceAlign: ƒ} >  ... > 
  at <BaseTransition onBeforeEnter=fn<onBeforeEnter> appear=true persisted=false  ... > 
  at <Transition ref=Ref< <div class=​"aj-tooltip aj-menu-inline-collapsed-tooltip css-dev-only-do-not-override-1qb1s0s aj-tooltip-placement-right" style=​"left:​ -779px;​ top:​ -927px;​ display:​ none;​">​…​</div>​ > name="aj-zoom-big-fast" appear=true  ... > 
  at <PopupInner prefixCls="aj-tooltip" point=null align= {points: Array(2), overflow: {…}, offset: Array(2), targetOffset: Array(2), ignoreShake: true}  ... > 
  at <Popup prefixCls="aj-tooltip" destroyPopupOnHide=false visible=false  ... > 
  at <Portal getContainer=fn<getContainer3> ref=Ref< Proxy(Object) {…} > didUpdate=fn<bound handlePortalUpdate> > 
  at <PortalWrapper key="portal" getContainer=fn didUpdate=fn<bound handlePortalUpdate>  ... > 
  at <Trigger popupClassName="aj-menu-inline-collapsed-tooltip css-dev-only-do-not-override-1qb1s0s" prefixCls="aj-tooltip" action="hover"  ... > 
  at <Tooltip title= (2) [{…}, {…}] overlayClassName="aj-menu-inline-collapsed-tooltip css-dev-only-do-not-override-1qb1s0s" trigger="hover"  ... > 
  at <ATooltip title= (2) [{…}, {…}] placement="right" overlayClassName="aj-menu-inline-collapsed-tooltip" > 
  at <AMenuItem key="/dashboard" > 
  at <OverflowContextProvider key=0 value= {prefixCls: 'aj-menu-overflow-item', responsive: false, component: {…}, invalidate: true, order: 0, …} > 
  at <ResizeObserver disabled=true onResize=fn<onOverflowResize> > 
  at <Overflow onMousedown=undefined prefixCls="aj-menu-overflow" component="ul"  ... > 
  at <AMenu selected-keys= ['/dashboard'] onUpdate:selectedKeys=fn open-keys= []  ... > 
  at <ALayoutSider collapsible="" collapsed-width=48 width=220  ... > 
  at <Anonymous hasSider=undefined prefixCls="aj-layout" tagName="section"  ... > 
  at <ALayout class="layouts-default" > 
  at <ALocaleProvider locale=undefined ANT_MARK__="internalMark" > 
  at <LocaleReceiver children=fn<children> > 
  at <AConfigProvider lang="zh_TW" prefix-cls="aj" > 
  at <Dashboard ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <LayoutLoader key="dashboard" layoutProps= {ref: RefImpl} name="dashboard" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="dashboard" name="dashboard"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:41
logError @ runtime-core.esm-bundler.js:216
handleError @ runtime-core.esm-bundler.js:208
callWithErrorHandling @ runtime-core.esm-bundler.js:160
flushJobs @ runtime-core.esm-bundler.js:362
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:275
queueJob @ runtime-core.esm-bundler.js:269
scheduler @ runtime-core.esm-bundler.js:1838
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:363
triggerRefValue @ reactivity.esm-bundler.js:966
(anonymous) @ reactivity.esm-bundler.js:1123
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:966
set value @ reactivity.esm-bundler.js:1010
handleSetCollapsed @ Sider.js:93
toggle @ Sider.js:146
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
invoker @ runtime-dom.esm-bundler.js:595
Show 21 more frames
Show less
runtime-core.esm-bundler.js:4502 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'namespaceURI')
    at isSVGContainer (runtime-core.esm-bundler.js:4502:60)
    at hydrateNode (runtime-core.esm-bundler.js:4657:13)
    at hydrateSubTree (runtime-core.esm-bundler.js:5722:13)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5742:13)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at instance.update (runtime-core.esm-bundler.js:5861:51)
    at setupRenderEffect (runtime-core.esm-bundler.js:5869:5)
    at mountComponent (runtime-core.esm-bundler.js:5659:5)
    at processComponent (runtime-core.esm-bundler.js:5612:9)
    at patch (runtime-core.esm-bundler.js:5087:11)

比如按钮 从原始状态在加载样式 怎么调整

There are many similarities between https://github.com/element-plus/element-plus-nuxt and the repository (https://github.com/vueComponent/ant-design-vue-nuxt/tree/f52e16b2bdbe506117ea67d1350b15e74ad60032).

https://github.com/search?q=nuxt.options.build.transpile.push%28libraryName%29&type=code
After searching a small code snippet from this repository throughout the entire GitHub codebase, I found that only three repositories share the same code. These are Nuxt plugins of Element Plus, Vant (which has the same author as Element Plus), and this repository. Even "Element Plus" is mentioned in the README.md of this repo.

Therefore, why not fork it directly?

Additionally, the repository is missing a license file. Please follow the MIT license, which only require the preservation of copyright and license notices, if this repo used code from https://github.com/element-plus/element-plus-nuxt. Thanks.

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

设置为true后，在app.vue使用如下代码



刷新页面后确实会渲染出来，但是在点击按钮后，执行弹窗
const handleMessage = () => {
message.info("This is a normal message");
}
这种会直接卡死服务器并且报错500

在 https://stackblitz.com/~/github.com/antdv-pro/antdv-nuxt-starter 例子中，将 pages/index.vue 修改为

ClientOnly标签中的a-rate样式丢失。请问有什么方式解决？

client.mjs:30 SyntaxError: The requested module '/_nuxt/node_modules/.pnpm/[email protected]/node_modules/dayjs/plugin/advancedFormat.js?v=45ac0268' does not provide an export named 'default' (at dayjs.js?v=45ac0268:7:8)

The above error is reported, dayjs needs to set tsconfig.json

{ //tsconfig.json
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
  }
}

In my current setup I'm using SSR and w have an a-menu component in the home index, when navigating to any route and then wanting to navigate back using the browser the navigations fails.

We get this console error

ntime-core.esm-bundler.js:4580 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    at hydrateNode (runtime-core.esm-bundler.js:4580:28)
    at hydrateSubTree (runtime-core.esm-bundler.js:5723:13)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5743:13)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at instance.update (runtime-core.esm-bundler.js:5862:51)
    at setupRenderEffect (runtime-core.esm-bundler.js:5870:5)
    at mountComponent (runtime-core.esm-bundler.js:5660:5)
    at processComponent (runtime-core.esm-bundler.js:5613:9)
    at patch (runtime-core.esm-bundler.js:5088:11)
    at mountChildren (runtime-core.esm-bundler.js:5332:7)
h

And the following warning

unk-VWWL2I6E.js:1449 [Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(v-fgt) 
- Server rendered DOM: "" (text) 
  at <MenuContextProvider key="1" overflowDisabled=false > 
  at <Anonymous> 
  at <ResizeObserver disabled=false onResize=fn<onOverflowResize> > 
  at <Overflow onMousedown=undefined prefixCls="ant-menu-overflow" component="ul"  ... > 
  at <AMenu mode="horizontal" > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > > 
  at <RouteProvider key="/" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', path: '/', query: {…}, hash: '', name: 'index', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <ALocaleProvider locale=undefined ANT_MARK__="internalMark" > 
  at <LocaleReceiver children=fn<children> > 
  at <AConfigProvider> 
  at <Default ref=Ref< Proxy(Object) {…} > > 
  at <AsyncComponentWrapper ref=Ref< Proxy(Object) {…} > > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

It can be reproduced in this stackblitz
https://stackblitz.com/edit/github-52q5xr-xvhlgv?file=pages%2Fabout.vue,pages%2Findex.vue
although here we not have access to the native browser back button the warning can be simulated by navigating from the About page to the index using the button I added with the navigateTo method.

• 版本
  nuxt：3.10.1 @ant-design-vue/nuxt：1.4.1

• 场景
  新建页面，官方文档案例使用多选 a-select 组件

• 报错
  

依然是
document is not defined

直接使用antdv官方推荐的message hooks方法，发现页面一闪而过就白屏了。没有报错信息