baiyuetribe / nuxt3-naive-ui-starter Goto Github PK

View Code? Open in Web Editor NEW

37.0 6.0 7.0 433 KB

A starter example for naive-ui with nuxt3.

Home Page: https://nuxt3-naive-ui.netlify.app

License: MIT License

Vue 37.69% TypeScript 62.31%

nuxt3 nuxt3-starter naive-ui vite ssr

nuxt3-naive-ui-starter's People

Contributors

Stargazers

Watchers

Forkers

dralucindaodonto affanplay fukurouzhong cloverforks iamsouliya solar-god chavocito

nuxt3-naive-ui-starter's Issues

vite 的 build 配置里没有 transpile 字段, 在你的配置中这里是怎么加进去的

message组件在nuxt3里从第二次调用开始，后面info图标丢失

复现步骤：https://stackblitz.com/edit/github-tkemse-cywt3p?file=pages/index.vue

Nuxt3当前内置的vue3版本貌似是vue@^3.0.11，如何升级至最新版？

该问题开发和构建时都无影响，只是有时候可能会有UI错位问题。

[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "vue@^3.0.0".
warning "naive-ui > @css-render/[email protected]" has unmet peer dependency "vue@^3.0.11".
warning "naive-ui > [email protected]" has unmet peer dependency "vue@^3.0.11".
warning "naive-ui > [email protected]" has unmet peer dependency "vue@^3.0.0".
warning "naive-ui > [email protected]" has unmet peer dependency "vue@^3.0.11".
warning "nuxt3 > @nuxt/vite-builder > [email protected]" has unmet peer dependency "postcss@^8.1.0".
warning "nuxt3 > @nuxt/vite-builder > [email protected]" has unmet peer dependency "postcss@^8.0.0".
warning "nuxt3 > @nuxt/vite-builder > [email protected]" has unmet peer dependency "postcss@^8.0.0".
warning " > [email protected]" has unmet peer dependency "vue@2 || 3".
[4/4] Building fresh packages...

以上来自vercel构建日志，演示站https://naiveui-nuxt3-kk2l4botq-baiyuetribe.vercel.app/

Nuxt3里如果使用vite自带的配置打包成一个css文件，结果nuxt3引入丢失

在nuxt.config.ts里

import { defineNuxtConfig } from 'nuxt3'
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    vite: {
        build: {
            cssCodeSplit: false, // 测试css会生成，但是页面丢失
        }
    },
})

打包后，.output里确实有单独的css文件生成，但是页面访问后css样式未被引入

已知问题，凡是调用document的组件由于服务端node环境没有，所以会显示ReferenceError: document is not defined

服务端报错但不影响使用的组件有：

Modal
Dropdown
ColorPicke
Mention
Popconfirm
Dialog
Drawer
TimePicker
DatePicker
Cascader
Message
Notification
Tooltips

其余组件一律OK。凡是调用document的报错演示地址 https://stackblitz.com/edit/github-63jd1t-2gyt1u?file=app.vue
奇怪现象：虽然报错，但是用户浏览器一切正常运行。如果能搞定node环境下无法识别document或关闭nuxt3的日志，或可用于正式产品，否则以上这些组件暂时不能使用。

Nuxt3 currently gives the useFetch and useAsyncData data acquisition method is triggered twice, which directly blocked the door to separate front and back-end development. Since the server has already got the data, why does the client have to get it again and again?

Nuxt3目前给出的useFetch和useAsyncData数据获取方式都是触发两次的，这下直接堵上了前后端分离开发的大门。既然服务端已经拿到了数据，为何客户端还要再重复获取一遍？都beta版了，这么重要的问题都没处理好，泪奔啊
nuxt/nuxt#13369

Error when adding buildModules to nuxt.config with NaiveUI

Hello ! Thanks for the great work. Using your module alone works fine but I am having a hard time integrating it to my project that uses modules (supabase integration).

Environment

Nuxt CLI v3.0.0-27409835.c53c736                                                                             11:57:10
RootDir: /media/workspace/code/nuxt3-naive-ui-starter                                       11:57:11
Nuxt project info:                                                                                           11:57:11

------------------------------
- Operating System: `Linux`
- Node Version:     `v17.3.0`
- Nuxt Version:     `3.0.0-27409835.c53c736`
- Package Manager:  `[email protected]`
- Bundler:          `Vite`
- User Config:      `build`, `vite`, `buildModules`, `supabase`
- Runtime Modules:  `-`
- Build Modules:    `@larbish/[email protected]`
------------------------------

Reproduction

https://stackblitz.com/edit/github-9zcuqu?file=app.vue

Describe the bug

When adding supabase module with the following instructions, automatic import of naiveui components don't work anymore. I have to manually import everything.

I wonder if @css-render/vue3-ssr plays well with Nuxt3 ? Do you have an idea what could cause this error ?

Logs

[Vue warn]: Failed to resolve component: n-result
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: n-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: n-space
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: n-h2
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: n-tooltip
[...]
(node:13) UnhandledPromiseRejectionWarning: TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at normalizePropsOptions (/home/projects/github-9zcuqu/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3384:11)
    at createComponentInstance (/home/projects/github-9zcuqu/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6851:23)
    at renderComponentVNode (/home/projects/github-9zcuqu/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:197:22)
    at Module.ssrRenderComponent (/home/projects/github-9zcuqu/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:629:12)
    at _sfc_ssrRender (file:///home/projects/github-9zcuqu/.nuxt/dist/server/server.mjs:7330:31)
    at renderComponentSubTree (/home/projects/github-9zcuqu/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:269:13)
    at renderComponentVNode (/home/projects/github-9zcuqu/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)
    at Module.ssrRenderComponent (/home/projects/github-9zcuqu/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:629:12)
    at default (file:///home/projects/github-9zcuqu/.nuxt/dist/server/server.mjs:7224:35)

500 - document is not defined

Hi,
FYI : When opening the live demo page, I'm seeing a "500 - document is not defined"

已知：pnpm打包开发完毕后，会报错Cannot find package 'unenv' imported from

解决方案，使用yarn重新打包。nuxt3虽然日更十多次，但是头疼的问题不少。

当前版本运行 `npm run dev` 后报错

(node:93509) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

 ERROR  [worker] Worker terminated due to reaching memory limit: JS heap out of memory

  at new NodeError (node:internal/errors:371:5)
  at Worker.[kOnExit] (node:internal/worker:276:26)
  at Worker.<computed>.onexit (node:internal/worker:198:20)

Grid Responsive 组件异常

关闭ssr使用客户端渲染显示正常；开启ssr服务端渲染后不正常，但是只要稍微缩放下浏览器窗口就恢复正常。
示例：https://naiveui-nuxt3.vercel.app

如何兼容tailiwndcss？

文档给出的在head中添加meta，貌似不是针对nuxt的，我在配置文件添加了meta无效

Hot Reload not working with naive-ui elements

Great work on getting naive-ui to work with nuxt 3, but hot-reload is not working.

While using your boilerplate, a page with

<template>
<h1>Naive-UI</h1>
<n-button>Button</n-button>
</template>

fails to hot-reload, but any other page without naive-ui elements hot-reloads.

Naive-UI在Nuxt3里会覆盖所有Head头部信息，导致必应收录空白

这种覆盖是全局的，包括nuxt.config.ts里定义的全局js。
在nuxt3插件里，如下配置证明有覆盖头部信息的问题

export default defineNuxtPlugin((nuxtApp) => {
    if (process.server) {
        const { collect } = setup(nuxtApp.vueApp);
        nuxtApp.ssrContext!.renderMeta = () => {
            return {
                headTags: collect(),    // 用于在head头部插入style标签，无css条件下会有白屏
            };
        };
    }
});

但是在SSG模式下，头部信息正常，ssg插件如下：

import { setup } from "@css-render/vue3-ssr";
import type { UserModule } from './types'

export const install: UserModule = ({ app, isClient, head }) => {
    if (!isClient && head) {
        const { collect } = setup(app);
        head.addHeadObjs(ref({
            style: [
                {
                    children: collect()
                }
            ]
        }))
    }
}

临时结论：可能在nuxt3里需要一种add函数